jquery - 停止 twitter bootstrap carousel 循环导航

Question

在轮播导航中，我有 <a class="carousel-control right" href="#howToBuyCarousel" data-slide="next">&rsaquo;</a> .如果我已经在最后一张幻灯片上，请问我是否禁止转到下一张幻灯片。如果我在第一张幻灯片上也是如此，我想禁用向左转到最后一张幻灯片。

Answer 1

您可以通过在“幻灯片”事件处理程序中手动检查当前事件的幻灯片来实现此功能

//this function gets called whenever carousel slides

$('#myCarousel').bind('slide', function(){

   var idx = $('#myCarousel .item.active').index();



   if(idx == yourCarouselLength - 1){

     //you have reached the end

     var next = $('#yourCarouselNext');

     // make your button inactive and remove any click handlers if present (pseudocode)

     next.addClass('inactive');

     //or stop automatic cycling, or however you want your carousel to behave


   }else if(idx == 0){

     //you are at the start

     var prev = $('#yourCarouselPrev');

     // make your button inactive and remove any click handlers if present (pseudocode)

     prev.addClass('inactive');

     //or stop automatic cycling, or however you want your carousel to behave

   }


});

这里的 '#yourCarouselPrev' 和 '#yourCarouselNext' 是您的轮播导航按钮的 ID。