javascript - Bootstrap Carousel pause -
i'm super new @ please gentle.
i'm trying use bootstrap carousel plugin , have different div section display when each slide changes. found example unfortunately can't figure out how pause.
<html> <head> <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-transition.js"></script> <script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-carousel.js"></script> <style> .carousel { width: 80%; margin-left: auto; margin-right: auto; } </style> <title>testapp</title> </head> <body> <div id="msg"></div> <div id="mycarousel" class="carousel slide"> <div class="carousel-inner"> <div class="item active"> <img src="http://i.microsoft.com/global/en-us/homepage/publishingimages/sprites/microsoft_gray.png" /> </div> <div class="item"> <img src="http://www.google.com.pk/ig/images/jfk/google_black.png" /> </div> <div class="item"> <img src="http://www.google.com.pk/ig/images/jfk/google_black.png" /> </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 class="row"> <div class="offset2"> <div>microsoft: *** index 0 ***</div> <div>google: *** index 1 ***</div> <div>google: *** index 2 ***</div> </div> </div> </body> </html> js
function msg(m) { $("#msg").text(m); } $('#mycarousel').carousel({ interval: 5000 }); var carouseltexts = $(".row .offset2 div"); $('#mycarousel').on('slid', function(event) { var idx = $(event.target).find('.carousel-inner .active').index(); carouseltexts.hide().eq(idx).show(); }).trigger('slid'); when add "pause: "hover" below interval: 5000 line divs stop rotate , hide section breaks.
any appreciated.
the carousel should pause on hover default shouldn't need option. think missing comma after "interval: 5000" option. try:
interval: 5000, pause: "hover"
Comments
Post a Comment