Menu
I'm trying to implement the carousel from Bootstrap.
Everything is working fine except the carousel indicators ('.carousel-indicators') are not cycling through with the slides.
Here is a completely stripped down page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, width=device-width">
<meta name="description" content="">
<title>Test Home Page</title>
<link href="http://s3.amazonaws.com/stockpr-test-store/esph2/files/css/bootstrap.min.css" rel="stylesheet" media="screen">
<style>
li.active {
color:red;
}
</style>
</head>
<body>
<div class="container">
<h1>Test</h1>
<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>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item"><img src="http://dummyimage.com/960x500/fff/000" alt="Slide 1"></div>
<div class="item"><img src="http://dummyimage.com/960x500/fff/000" alt="Slide 2"></div>
<div class="item"><img src="http://dummyimage.com/960x500/fff/000" alt="Slide 3"></div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div><!--//container-->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://s3.amazonaws.com/stockpr-test-store/esph2/files/js/bootstrap.min.js"></script>
<script>
$('.carousel').carousel();
</script>
</body>
This is almost an exact duplicate of the example on http://twitter.github.com/bootstrap/javascript.html#carousel. Any ideas as to why they wouldn't be sliding?
816
In browsers where the Page Visibility API is supported, the carousel will avoid sliding when the webpage is not visible to the user (such as when the browser tab is inactive, the browser window is minimized, etc.).
You just need to override two properties ( width and height ) and add a new one, border-radius , to . carousel-indicators li . Make width and height values equal eg: 10px each and give a border-radius of 100% .
To turn off the autoplay set data-mdb-interval="false" next to a . carousel .
The indicators are the little dots at the bottom of each slide (which indicates how many slides there are in the carousel, and which slide the user is currently viewing). The indicators are specified in an ordered list with class .carousel-indicators . The data-target attribute points to the id of the carousel.
Update your Bootstrap css file and JavaScript file to the latest versions.
148
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
