Question

我使用过这个例子：http://www.bootply.com/79859 我复制了它，并在#MyCarousele中重命名为#MyCarousel，我也删除了不必要的幻灯片。但它不能正常运作。

当它自动滑动或我滑动时，缩略图不会更新。我认为问题出在这里：

<script>
     $('#myCarousele').carousel({
     interval: 4000
     });

     // handles the carousel thumbnails
     $('[id^=carousel-selector-]').click( function(){
     var id_selector = $(this).attr("id");
     var id = id_selector.substr(id_selector.length -1);
     id = parseInt(id);
     $('#myCarousele').carousel(id);
     $('[id^=carousel-selector-]').removeClass('selected');
     $(this).addClass('selected');
     });

    // when the carousel slides, auto update
    **$('#myCarousele').on('slid', function (e)** {
    var id = $('.item.active').data('slide-number');
    id = parseInt(id);
    $('[id^=carousel-selector-]').removeClass('selected');
    $('[id^=carousel-selector-'+id+']').addClass('selected');
    });
</script>

查看我的bootply代码：http://www.bootply.com/0cDXKzY1ez 感谢。

Answer 1

在Bootstrap 3.2中，您需要更改＆＃39;滑动＆＃39;到＆＃39; slid.bs.carousel＆＃39;

以下是该功能的新代码：

$('#myCarousele').on('slid.bs.carousel', function () {   

     var id = $('.item.active').data('slide-number');
     id = parseInt(id);
     $('[id^=carousel-selector-]').removeClass('selected');
     $('[id^=carousel-selector-'+id+']').addClass('selected'); 

});

请注意，您链接的示例使用的是Bootstrap 3.0，并且您使用的是Bootstrap 3.2，您可以找到导致更改的提交here i believe.

<强>更新

根据评论中的更新，试试这个：

$('#myCarousele').on('slid.bs.carousel', function (e) {
    var id = $(this).find('.item.active').data('slide-number');

    id = parseInt(id);
    $('[id^=carousel-selector-]').removeClass('selected');
    $('[id^=carousel-selector-'+id+']').addClass('selected');
    });

Bootstrap 3，缩略图导航轮播。选中的缩图

1 个答案: