Menu
I've been using twitter bootstrap with no issues, until I started using the carousel plugin. The carousel controls work fine and it transitions smoothly, but it does not auto cycle! I've searched for ages, but cannot find any solutions. If anyone has any idea, please let me know, I would be very grateful.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Your Income Expert</title>
<link rel="stylesheet/less" type="text/css" href="less/style.less">
<script src="js/less.js" type="text/javascript"></script>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<script src="js/bootstrap-tab.js" type="text/javascript"></script>
<script src="js/bootstrap-carousel.js" type="text/javascript"></script>
<script src="js/bootstrap-transition.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="span3">
<div class="well sidebar-nav">
<ul class="nav nav-list">
<li><h2>Your Logo Here</h2></li>
<li class="nav-header">Main</li>
<li class="active"><a href="index.html">Home</a></li>
<li><a href="company.html">Company</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="#">Books</a></li>
<li><a href="#">Contact</a></li>
<li class="nav-header">Keep In Touch</li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">LinkedIn</a></li>
<li><a href="#">Blog</a></li>
</ul>
</div><!--/.well -->
</div><!--/span-->
<div class="span9">
<div class="well">
<div id="headerCarousel" class="carousel slide">
<div id="carousel-inner">
<div class="active item"><a href="#"><img src="broker.png" alt="" /></a></div>
<div class="item"><a href="#"><img src="2.png" alt="" /></a></div>
<div class="item"><a href="#"><img src="3.png" alt="" /></a></div>
</div>
<a class="carousel-control left" href="#headerCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#headerCarousel" data-slide="next">›</a>
</div>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Service 1</a></li>
<li><a data-toggle="tab" href="#profile">Service 2</a></li>
<li><a data-toggle="tab" href="#messages">Service 3</a></li>
<li><a data-toggle="tab" href="#settings">Service 4</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla laoreet neque sit amet libero pulvinar vitae consequat ante adipiscing. Nam vehicula arcu in diam vehicula pretium. Nulla volutpat tellus ut tellus consectetur blandit egestas est ullamcorper. Morbi adipiscing suscipit quam eget eleifend. Nam est turpis, blandit sed vehicula ut, aliquet quis turpis. Nulla et ligula in.</p>
</div>
<div class="tab-pane" id="profile">
<p>Testing the profile tab.</p>
</div>
<div class="tab-pane" id="messages">
<p>Testing the messages tab</p>
</div>
<div class="tab-pane" id="settings">
<p>Testing the settings tab.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$('.headerCarousel').carousel({ interval: 1200 })
</script>
</body>
557
To set or to stop autoplay in Bootstrap carousel you can use data attributes or JavaScript code. You'll find detailed documentation and code examples of Bootstrap Carousel in Bootstrap Carousel Docs. Note: Autoplay for the carousel is turned on from default.
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.).
Just add the data-interval attribute to your bootstrap carousel to automatically scroll to next slide every x seconds. Do note that data-interval calculate your value in milliseconds so if you want to change the carousel slides after every 10 seconds, you need to add data-interval=10000 .
Use the [interval]="'0'" input. This will disable the auto-sliding feature.
You're pointing to the wrong container in your carousel call, it should be the id of your image container and not a class;
JS fixed
$('#headerCarousel').carousel({
interval: 1200
});
In reference to the above answer, you could also have used a class. You just put the ID in as if it were a class. If you had done:
$('.carousel.slide').carousel({
interval: 1200
});
It would have worked just fine.
44
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
