Menu
Not sure why the plugin is behaving this way but whenever I refresh the page with the carousel plugin, the containing div is blank for like 5-seconds then the carousel will begin to function normally--sliding through.
I created a slimmed down version just to see if there were other things getting in the way of things. Here's what I have:
<html>
<head>
<link rel="stylesheet" href="bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="css/carousel.css" type="text/css">
<script type="text/javascript" src="scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="scripts/bootstrap-transition.js"></script>
<script type="text/javascript" src="scripts/bootstrap-carousel.js"></script>
<script type="text/javascript">
$(function() {
$('#myJumbotron').carousel();
});
</script>
</head>
<body>
<!-- JUMBOTRON
===================================================================== -->
<div class="container">
<div class="row">
<section class="span16">
<div id="myJumbotron" class="carousel">
<div class="carousel-inner">
<div class="item">
<img src="images/jumbotron.jpg" alt="Featured specials" />
</div>
<div class="item">
<img src="http://placehold.it/940x380" alt="Featured specials" />
</div>
<div class="item">
<img src="images/jumbotron.jpg" alt="Featured specials" />
</div>
</div>
<a class="left carousel-control" href="#myJumbotron" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myJumbotron" data-slide="next">›</a>
</div>
</section>
</div>
</div>
</body>
</html>
I used the SimpLESS tool to only compile the carousel.less file to its own carousel.css file and the bootstrap.min.css is unmodified as well.
You can see what's happening when going here: furnitureroadshow.com. Any help on this would be much appreciated.
859
You can simply use the data-interval attribute of the carousel class. It's default value is set to data-interval="3000" i.e 3seconds. All you need to do is set it to your desired requirements.
To turn off the autoplay set data-mdb-interval="false" next to a . carousel .
The Data-interval attribute is used to set the interval time between two carousel item by default its value is 3000 milliseconds.
Use the [interval]="'0'" input. This will disable the auto-sliding feature. Here's the link to the Carousel Documentation.
add for the first item class "active" in html, now you are waiting for 1 cycle .
EX:
<div class="item active">
<img src="images/jumbotron.jpg" alt="Featured specials" />
</div>
<div class="item">
<img src="http://placehold.it/940x380" alt="Featured specials" />
</div>
......
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
