javascript - stop autoslide from boostrap carousel with thumbnails -
i trying stop autoslide bootstrap carousel corresponding jsfiddle example.
whereas
$('.carousel').carousel({ interval: false }); stops main carousel, dident find way stop autosliding thumbnail part.
$(document).ready(function() { var totalitems = $('#carousel .item').length; var thumbs = 3; var currentthumbs = 0; var = 0; var thumbactive = 1; function togglethumbactive (i) { $('#carousel-thumbs .item>div').removeclass('active'); $('#carousel-thumbs .item.active>div:nth-child(' + +')').addclass('active'); } $('#carousel').on('slide.bs.carousel', function(e) { //var active = $(e.target).find('.carousel-inner > .item.active'); //var = active.index(); var = $('#carousel .item.active').index()+1; var next = $(e.relatedtarget); = next.index()+1; var nextthumbs = math.ceil(to/thumbs) - 1; if (nextthumbs != currentthumbs) { $('#carousel-thumbs').carousel(nextthumbs); currentthumbs = nextthumbs; } thumbactive = +to-(currentthumbs*thumbs); //console.log(from + ' => ' + + ' / ' + currentthumbs); }); $('#carousel').on('slid.bs.carousel', function(e) { togglethumbactive(thumbactive); }); $('#carousel-thumbs').on('slid.bs.carousel', function(e) { togglethumbactive(thumbactive); }); $("#carousel").on("swiperight",function(){ $('#carousel').carousel('prev'); }); $("#carousel").on("swipeleft",function(){ $('#carousel').carousel('next'); }); $("#carousel-thumbs").on("swiperight",function(){ $('#carousel-thumbs').carousel('prev'); }); $("#carousel-thumbs").on("swipeleft",function(){ $('#carousel-thumbs').carousel('next'); }); }); $('.carousel').carousel({ interval: false });#carousel, #carousel-thumbs { max-width: 800px; margin: 15px auto; } #carousel-thumbs .item img { opacity: 0.5; } #carousel-thumbs .item.active div.active img { opacity: 1; border: 2px solid #000; } #carousel-thumbs .item.active div:not(.active) img { cursor:pointer; } #carousel-thumbs .carousel-control { background-image: none; }<script src="https://code.jquery.com/jquery-3.2.1.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div id="carousel" class="carousel slide" data-ride="carousel"> <!-- wrapper slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="http://placehold.it/800x600" class="img-responsive"> <div class="carousel-caption">1</div> </div> <div class="item"> <img src="http://placehold.it/800x600" class="img-responsive"> <div class="carousel-caption">2</div> </div> <div class="item"> <img src="http://placehold.it/800x600" class="img-responsive"> <div class="carousel-caption">3</div> </div> <div class="item"> <img src="http://placehold.it/800x600" class="img-responsive"> <div class="carousel-caption">4</div> </div> <div class="item"> <img src="http://placehold.it/800x600" class="img-responsive"> <div class="carousel-caption">5</div> </div> <div class="item"> <img src="http://placehold.it/800x600" class="img-responsive"> <div class="carousel-caption">6</div> </div> <div class="item"> <img src="http://placehold.it/800x600" class="img-responsive"> <div class="carousel-caption">7</div> </div> <div class="item"> <img src="http://placehold.it/800x600" class="img-responsive"> <div class="carousel-caption">8</div> </div> <div class="item"> <img src="http://placehold.it/800x600" class="img-responsive"> <div class="carousel-caption">9</div> </div> </div> <!-- controls --> <a class="left carousel-control hiden-xs" href="#carousel" 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 hiden-xs" href="#carousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">next</span> </a> </div> <div id="carousel-thumbs" class="carousel slide"> <!-- wrapper slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <div class="col-xs-4 active"onclick="$('#carousel').carousel(0);"> <img src="http://placehold.it/400x200" class="img-responsive"> </div> <div class="col-xs-4"onclick="$('#carousel').carousel(1);"> <img src="http://placehold.it/400x200" class="img-responsive"> </div> <div class="col-xs-4"onclick="$('#carousel').carousel(2);"> <img src="http://placehold.it/400x200" class="img-responsive"> </div> </div> <div class="item"> <div class="col-xs-4"onclick="$('#carousel').carousel(3);"> <img src="http://placehold.it/400x200" class="img-responsive"> </div> <div class="col-xs-4" onclick="$('#carousel').carousel(4);"> <img src="http://placehold.it/400x200" class="img-responsive"> </div> <div class="col-xs-4" onclick="$('#carousel').carousel(5);"> <img src="http://placehold.it/400x200" class="img-responsive"> </div> <div class="col-xs-4" onclick="$('#carousel').carousel(5);"> <img src="http://placehold.it/400x200" class="img-responsive"> </div> <div class="col-xs-4" onclick="$('#carousel').carousel(5);"> <img src="http://placehold.it/400x200" class="img-responsive"> </div> </div> <div class="item"> <div class="col-xs-4" onclick="$('#carousel').carousel(6);"> <img src="http://placehold.it/400x200" class="img-responsive"> </div> <div class="col-xs-4" onclick="$('#carousel').carousel(7);"> <img src="http://placehold.it/400x200" class="img-responsive"> </div> <div class="col-xs-4" onclick="$('#carousel').carousel(8);"> <img src="http://placehold.it/400x200" class="img-responsive"> </div> </div> <!-- controls --> <a class="left carousel-control hidden-xs" href="#carousel-thumbs" 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 hidden-xs" href="#carousel-thumbs" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">next</span> </a> </div> </div>
get rid of data-ride="carousel", give .carousel data-interval="false" attribute.
quoting w3s
the data-ride="carousel" attribute tells bootstrap begin animating carousel when page loads.
if want stop animating, remove .slide class your .carousel selector.
the
.slideclass adds css transition , animation effect, makes items slide when showing new item. omit class if not want effect.
$(document).ready(function() { var totalitems = $('#carousel .item').length; var thumbs = 3; var currentthumbs = 0; var = 0; var thumbactive = 1; function togglethumbactive (i) { $('#carousel-thumbs .item>div').removeclass('active'); $('#carousel-thumbs .item.active>div:nth-child(' + +')').addclass('active'); } $('#carousel').on('slide.bs.carousel', function(e) { //var active = $(e.target).find('.carousel-inner > .item.active'); //var = active.index(); var = $('#carousel .item.active').index()+1; var next = $(e.relatedtarget); = next.index()+1; var nextthumbs = math.ceil(to/thumbs) - 1; if (nextthumbs != currentthumbs) { $('#carousel-thumbs').carousel(nextthumbs); currentthumbs = nextthumbs; } thumbactive = +to-(currentthumbs*thumbs); //console.log(from + ' => ' + + ' / ' + currentthumbs); }); $('#carousel').on('slid.bs.carousel', function(e) { togglethumbactive(thumbactive); }); $('#carousel-thumbs').on('slid.bs.carousel', function(e) { togglethumbactive(thumbactive); }); $("#carousel").on("swiperight",function(){ $('#carousel').carousel('prev'); }); $("#carousel").on("swipeleft",function(){ $('#carousel').carousel('next'); }); $("#carousel-thumbs").on("swiperight",function(){ $('#carousel-thumbs').carousel('prev'); }); $("#carousel-thumbs").on("swipeleft",function(){ $('#carousel-thumbs').carousel('next'); }); }); $('.carousel').carousel({ interval: false });#carousel, #carousel-thumbs { max-width: 800px; margin: 15px auto; } #carousel-thumbs .item img { opacity: 0.5; } #carousel-thumbs .item.active div.active img { opacity: 1; border: 2px solid #000; } #carousel-thumbs .item.active div:not(.active) img { cursor:pointer; } #carousel-thumbs .carousel-control { background-image: none; }<script src="https://code.jquery.com/jquery-3.2.1.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div id="carousel" class="carousel" data-interval="false" > <!-- wrapper slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="http://placehold.it/800x600" class="img-responsive"> <div class="carousel-caption">1</div> </div> <div class="item"> <img src="http://placehold.it/800x600" class="img-responsive"> <div class="carousel-caption">2</div> </div> <div class="item"> <img src="http://placehold.it/800x600" class="img-responsive"> <div class="carousel-caption">3</div> </div> <div class="item"> <img src="http://placehold.it/800x600" class="img-responsive"> <div class="carousel-caption">4</div> </div> <div class="item"> <img src="http://placehold.it/800x600" class="img-responsive"> <div class="carousel-caption">5</div> </div> <div class="item"> <img src="http://placehold.it/800x600" class="img-responsive"> <div class="carousel-caption">6</div> </div> <div class="item"> <img src="http://placehold.it/800x600" class="img-responsive"> <div class="carousel-caption">7</div> </div> <div class="item"> <img src="http://placehold.it/800x600" class="img-responsive"> <div class="carousel-caption">8</div> </div> <div class="item"> <img src="http://placehold.it/800x600" class="img-responsive"> <div class="carousel-caption">9</div> </div> </div> <!-- controls --> <a class="left carousel-control hiden-xs" href="#carousel" 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 hiden-xs" href="#carousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">next</span> </a> </div> <div id="carousel-thumbs" class="carousel slide"> <!-- wrapper slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <div class="col-xs-4 active"onclick="$('#carousel').carousel(0);"> <img src="http://placehold.it/400x200" class="img-responsive"> </div> <div class="col-xs-4"onclick="$('#carousel').carousel(1);"> <img src="http://placehold.it/400x200" class="img-responsive"> </div> <div class="col-xs-4"onclick="$('#carousel').carousel(2);"> <img src="http://placehold.it/400x200" class="img-responsive"> </div> </div> <div class="item"> <div class="col-xs-4"onclick="$('#carousel').carousel(3);"> <img src="http://placehold.it/400x200" class="img-responsive"> </div> <div class="col-xs-4" onclick="$('#carousel').carousel(4);"> <img src="http://placehold.it/400x200" class="img-responsive"> </div> <div class="col-xs-4" onclick="$('#carousel').carousel(5);"> <img src="http://placehold.it/400x200" class="img-responsive"> </div> <div class="col-xs-4" onclick="$('#carousel').carousel(5);"> <img src="http://placehold.it/400x200" class="img-responsive"> </div> <div class="col-xs-4" onclick="$('#carousel').carousel(5);"> <img src="http://placehold.it/400x200" class="img-responsive"> </div> </div> <div class="item"> <div class="col-xs-4" onclick="$('#carousel').carousel(6);"> <img src="http://placehold.it/400x200" class="img-responsive"> </div> <div class="col-xs-4" onclick="$('#carousel').carousel(7);"> <img src="http://placehold.it/400x200" class="img-responsive"> </div> <div class="col-xs-4" onclick="$('#carousel').carousel(8);"> <img src="http://placehold.it/400x200" class="img-responsive"> </div> </div> <!-- controls --> <a class="left carousel-control hidden-xs" href="#carousel-thumbs" 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 hidden-xs" href="#carousel-thumbs" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">next</span> </a> </div> </div>
Comments
Post a Comment