I have just coded bootstrap carousel but I'm not able to get the indicators (left, right) for scrolling.
Please find the snippet below
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initital-scale=1">
<title> Bootstrap Example</title>
<!-- Bootstrap References -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="index.js"></script>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div id="mySlider" class="carousel slide" data-ride="carousel">
<!-- .nav's buttons on the bottom -->
<ol class="carousel-indicators">
<li data-target="#mySlider" data-slide-to="0" class="active"></li>
<li data-target="#mySlider" data-slide-to="1"></li>
</ol>
<!-- Image slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<figure>
<img width=500px height=500px src="http://www.hdwallpapersfreedownload.com/uploads/large/fruits/orange-fruit-with-leaf-hd.jpg" alt="Slide1">
<!--<div class="carousel-caption">This is a fruit leaf</div>-->
</figure>
<figcaption class="carousel-caption">This is a fruit leaf</figcaption>
</div>
<div class="item">
<figure>
<img width=500px height=500px src="http://www.greatgrubclub.com/domains/greatgrubclub.com/local/media/images/medium/4_1_1_kiwi.jpg" alt="Slide2">
<!--<div class="carousel-caption">This is a fruit leaf</div>-->
</figure>
<figcaption class="carousel-caption">KIWIf</figcaption>
</div>
</div> <!-- END: Image slides -->
<!-- Slide buttons (left,right) buttons -->
<a class="left coursel-control" href="#mySlider" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right coursel-control" href="#mySlider" role="button">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div> <!-- END: Slider -->
</div>
</div>
</div>
</body>
</html>
I get the scrolling and everything but the right "Indicator" to scroll does not appear
What am I doing wrong?
Thanks
Added the default glyphicons and you're missing the data-slide attribute on the right/next arrow.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initital-scale=1">
<title> Bootstrap Example</title>
<!-- Bootstrap References -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="index.js"></script>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div id="mySlider" class="carousel slide" data-ride="carousel">
<!-- .nav's buttons on the bottom -->
<ol class="carousel-indicators">
<li data-target="#mySlider" data-slide-to="0" class="active"></li>
<li data-target="#mySlider" data-slide-to="1"></li>
</ol>
<!-- Image slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<figure>
<img width=500px height=500px src="http://www.hdwallpapersfreedownload.com/uploads/large/fruits/orange-fruit-with-leaf-hd.jpg" alt="Slide1">
<!--<div class="carousel-caption">This is a fruit leaf</div>-->
</figure>
<figcaption class="carousel-caption">This is a fruit leaf</figcaption>
</div>
<div class="item">
<figure>
<img width=500px height=500px src="http://www.greatgrubclub.com/domains/greatgrubclub.com/local/media/images/medium/4_1_1_kiwi.jpg" alt="Slide2">
<!--<div class="carousel-caption">This is a fruit leaf</div>-->
</figure>
<figcaption class="carousel-caption">KIWIf</figcaption>
</div>
</div><!-- END: Image slides -->
<!-- Slide buttons (left,right) buttons -->
<a class="left carousel-control" href="#mySlider" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#mySlider" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- END: Slider -->
</div>
</div>
</div>
</body>
Related
Generally I am always way over my head with programming, but I'm doing my best. Please be nice!
I watched a nice tutorial on YouTube in order to build myself a carousel in my Django project.
But instead of showing one image at a time it is just stacking all three on top of each other. I'm sure there's something simple that I've missed.
Please help me to fix this with a minimal of code change.
Here is my current HTML code. I don't believe the CSS is important at this point:
<div class="container-fluid" id="main-container">
<div class="row">
<div class="col-sm-12">
<div id="slider" class="carousel slide" data-ride="carousel">
<!-- indicators (dot nav): -->
<ol class="carousel-indicators">
<li data-target="#slider" data-slide-to="0" class="active"></li>
<li data-target="#slider" data-slide-to="1"></li>
<li data-target="#slider" data-slide-to="2"></li>
</ol>
<!-- wrapper for slides: -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="img-fluid" src='{% static "images/carousel1.jpg" %}' alt="string players"/>
<div class="carousel-caption">
<h1>Text here</h1>
</div>
</div>
<div class="item">
<img class="img-fluid" src='{% static "images/carousel2.jpg" %}' alt="string players"/>
<div class="carousel-caption">
<h1>More text here</h1>
</div>
</div>
<div class="item">
<img class="img-fluid" src='{% static "images/carousel3.jpg" %}' alt="string players"/>
<div class="carousel-caption">
<h1>Even more text here</h1>
</div>
</div>
</div>
<!-- next/prev navigation controls: -->
<a class="left carousel-control" href="#slider" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#slider" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
And in case the version of Bootstrap is where the problem lies, here is my meta, which has the version of Bootstrap I am using on the project:
<head>
<title>HCMN : {{ page_name }}</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Load CSNs (same for all templates): -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<!-- Load CSS files (from each template): -->
{% block load_css %}
{% endblock %}
Thank you SO MUCH for your help!!
Aha! Nevermind. I needed "carousel-item" as a class instead of "carousel"! I love it when I can answer my own questions...
I am trying to make a bootstrap carousel that automatically switches between images in a given sequence. Everything is working in regards to controls (i.e arrows for going back and forth between pics & slide position indicator), but the images are stacked on top of each other when I load the page. Can someone point out an issue in this?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Appraisal</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=VT323" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.2/css/mdb.min.css">
</head>
<body>
<header>
<h1 class="animated slideInLeft">text goes here</h1>
<p>...</p>
<h4 class="animated slideInRight">portfolio</h4>
</header>
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel_inner">
<div class="item active">
<img src="./pics/space_1.jpg" alt="Space 1" class="img-responsive">
<div class="carousel-caption">
<h3>Appraisal 1</h3>
<p></p>
</div>
</div>
<div class="item">
<img src="./pics/space_2.jpg" alt="Space 2" class="img-responsive">
<div class="carousel-caption">
<h3>Appraisal 2</h3>
<p></p>
</div>
</div>
<div class="item">
<img src="./pics/space_3.jpg" alt="Space 2" class="img-responsive">
<div class="carousel-caption">
<h3>Appraisal 3</h3>
<p></p>
</div>
</div>
</div>
<a href="#myCarousel" class="carousel-control" data-slide="prev">
<span class="icon-prev left"></span>
</a>
<a href="#myCarousel" class="carousel-control" data-slide="next">
<span class="icon-next right"></span>
</a>
</div>
<div class="skills">
</div>
<div class="certs">
</div>
<footer>
<p>developed by: jefferson steelflex</p>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.2/js/mdb.min.js"></script>
</body>
</html>
It's just a typo. Just change the class "carousel_inner" in the slides container div for "carousel-inner".
There is an grey area (shown below in the image) right of the images. If I center the image inside the carousel, the grey area is evenly divided left and right of the image. Is there a way to remove this and make the carousel same size as the images.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.item {
max-height: 400px;
}
</style>
</head>
<body>
<!------------nav bar ---------------------->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">HOME</a>
</div>
<ul class="nav navbar-nav">
<li>GALLERY</li>
<li>REFERENCES</li>
</ul>
</div>
</nav>
<!--------------Centering div --------------->
<div class="container-fluid">
<div class="row">
<div class="col-md-offset-1 col-md-10">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://res.cloudinary.com/dstd7egax/image/upload/v1497784186/davinciSelf_lma2vh.jpg">
</div>
<div class="item">
<img class src="http://res.cloudinary.com/dstd7egax/image/upload/v1497784193/Madonna_i9fj4t.png" alt="Chicago">
</div>
<div class="item">
<img src="http://res.cloudinary.com/dstd7egax/image/upload/v1497784183/davinciSketch_zs4fv5.jpg" alt="New York">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</body>
</html>
Extra space
Based on your images is 800px wide, this rule fixes that
#myCarousel {
margin: 0 auto;
max-width: 800px;
}
Stack snippet
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.item {
max-height: 400px;
}
#myCarousel {
margin: 0 auto;
max-width: 800px;
}
</style>
</head>
<body>
<!------------nav bar ---------------------->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">HOME</a>
</div>
<ul class="nav navbar-nav">
<li>GALLERY</li>
<li>REFERENCES</li>
</ul>
</div>
</nav>
<!--------------Centering div --------------->
<div class="container-fluid">
<div class="row">
<div class="col-md-offset-1 col-md-10">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://res.cloudinary.com/dstd7egax/image/upload/v1497784186/davinciSelf_lma2vh.jpg">
</div>
<div class="item">
<img class src="http://res.cloudinary.com/dstd7egax/image/upload/v1497784193/Madonna_i9fj4t.png" alt="Chicago">
</div>
<div class="item">
<img src="http://res.cloudinary.com/dstd7egax/image/upload/v1497784183/davinciSketch_zs4fv5.jpg" alt="New York">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</body>
</html>
One quick fix, add this css:
.carousel-control.right,
.carousel-control.left {
background: transparent!important;
}
The gray areas are background colors for the control buttons. Even if the image is aligned left, it is still there, it's just harder to see.
Check here
I'm using Bootstrap on my website. My website has two columns on a desktop screen: a big area for my content, and a small area at the right side for some information about upcoming events. The two areas nicely resize (become smaller) when I make my browser smaller, and at some point, the rightmost column jumps to the bottom, just as the responsiveness is intended.
On my homepage I use the carousel based on this example of w3schools.
The problem is that the picture of the carousel never resizes according to the column width, it always stays the same. In the w3school example, you can see that resizing your browser results in resizing the images.
My HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link rel='stylesheet' type='text/css' href='http://fonts.googleapis.com/css?family=Arimo:400,700'>
<link rel="stylesheet" type='text/css' href="/Content/bootstrap.css" />
<link rel="stylesheet" type='text/css' href="/Content/bootstrap-datepicker.css" />
<link rel="stylesheet" type='text/css' href="/Content/NYC.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="/Scripts/bootstrap-datepicker.js"></script>
<script src="/Scripts/bootstrap.min.js"></script>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"></a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Agenda</li>
<li>Foto's</li>
<li>Contact</li>
<li>Login</li>
</ul>
</div> <!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-sm-8">
<header>
<h2>Welkom</h2>
</header>
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src='https://farm8.staticflickr.com/7497/15440536044_ddb9b9a4f2_z.jpg' alt="Foto" >
<div class="carousel-caption">
<h2>Caption</h2>
</div>
</div>
<div class="item">
<img src='https://farm8.staticflickr.com/7542/15440460614_e147f37c21_z.jpg' alt="Foto">
<div class="carousel-caption">
<h2>Caption</h2>
</div>
</div>
<div class="item">
<img src='https://farm8.staticflickr.com/7562/15761616062_9cd995c76f_z.jpg' alt="Foto">
<div class="carousel-caption">
<h2>Caption</h2>
</div>
</div>
<div class="item">
<img src='https://farm3.staticflickr.com/2905/13976192867_78bd01faa1_z.jpg' alt="Foto">
<div class="carousel-caption">
<h2>Caption</h2>
</div>
</div>
<div class="item">
<img src='https://farm4.staticflickr.com/3949/15574689588_2b427e30fa_z.jpg' alt="Foto">
<div class="carousel-caption">
<h2>Caption</h2>
</div>
</div>
</div><!-- /.carousel-inner -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- /.carousel -->
</div>
<div class="col-sm-3 col-sm-offset-1">
<header>
<h3>Vandaag</h3>
</header>
<ul class="interestingevents">
<li>
<p class="posted">Niks te zien</p>
</li>
</ul>
<header>
<h3>Komende evenementen</h3>
</header>
<ul class="interestingevents">
<li>
<a href='/Event/showEvent?eventID=13'>
<p class="posted">
zondag 8 maart 2015
</p>
<img src="/Content/Media/logosailing40x40.png" />
<p class="text">
Winterwedstrijd
</p>
<br/>
</a>
</li>
<li>
<a href='/Event/showEvent?eventID=20'>
<p class="posted">
zaterdag 14 maart 2015
</p>
<img src="/Content/Media/logogeneral40x40.png" />
<p class="text">
Onderhoud infrastructuur
</p>
<br/>
</a>
</li>
<li>
<a href='/Event/showEvent?eventID=21'>
<p class="posted">
zondag 15 maart 2015
</p>
<img src="/Content/Media/logogeneral40x40.png" />
<p class="text">
Onderhoud infrastructuur
</p>
<br/>
</a>
</li>
</ul>
<header>
<h3>Gepasseerde evenementen</h3>
</header>
<ul class="interestingevents">
<li>
<p class="posted">
zondag 8 februari 2015
</p>
<img src="/Content/Media/logosailing40x40.png" />
<p class="text">
<a href='/Event/showEvent?eventID=12'>Winterwedstrijd</a>
</p>
<br />
</li>
<li>
<p class="posted">
zondag 18 januari 2015
</p>
<img src="/Content/Media/logogeneral40x40.png" />
<p class="text">
<a href='/Event/showEvent?eventID=17'>Ledenvergadering</a>
</p>
<br />
</li>
<li>
<p class="posted">
zondag 4 januari 2015
</p>
<img src="/Content/Media/logosailing40x40.png" />
<p class="text">
<a href='/Event/showEvent?eventID=10'>Winterwedstrijd</a>
</p>
<br />
</li>
</ul>
</div>
</div>
</div>
<footer>
<div id="copyright">
<div class="container">
<p>Created by </p>
</div>
</div>
</footer>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Firefox","requestId":"c3ad45de45c543c5bc071cf0007d01e5"}
</script>
<script type="text/javascript" src="http://localhost:60883/d9c407548b294087843ff4faeef78add/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
</html>
Maybe you can try with the Bootstrap CDN links:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
Take a look at the Bootstrap website.
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Place favicon.ico and apple-touch-icon(s) in the root directory -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.7.1.min.js"></script>
<script src="js/vendor/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.js"></script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<div class="container" style="margin-top:20px;">
<div class="col-md-4">
<ul class="nav nav-pills nav-stacked">
<li class="active">
Home</li>
<li>Profile</li>
<li>Messages</li>
</ul>
</div>
<div class="col-md-8">
<div id="mycar" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#mycar" data-slide-to="0" class="active"></li>
<li data-target="#mycar" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="item-active">
<img src="slider/demo-slider-1.jpg">
</div>
<div class="item">
<img src="slider/image-slider-2.jpg">
</div>
</div>
<a class="left carousel-control" href="#mycar" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#mycar" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</body>
</html>
This is my full code what problem is occuring is that carousel slide is not properly functioning. When page is loaded first time the image slider works means when we click slider arrow (either of them weather left or right) it works and image does change. But after first attempt it does not change or slide the image. other problem is that slide indicator links are also not working.
Seems like something is conflicting. Build the "mycar" Div as following
<div id="mycar" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#mycar" data-slide-to="0" class="active"></li>
<li data-target="#mycar" data-slide-to="1"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="slider/demo-slider-1.jpg">
</div>
<div class="item">
<img src="slider/demo-slider-2.jpg">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#mycar" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span></a><a class="right carousel-control"
href="#mycar" data-slide="next"><span class="glyphicon glyphicon-chevron-right">
</span></a>
</div>
Hope this helps .. if it does help me earn reputation .. or if you seek more help please let me know.