Question

我正在尝试使用此自定义引导程序轮播，并在活动时更改活动缩略图样式。我需要使用div vs li保留缩略图列表，以便我可以将它们保存在响应网格中。

$('#myCarousel').carousel({
    interval:   4000
});

var clickEvent = false;
$('#myCarousel').on('click', '.thumbs a', function() {
        clickEvent = true;
        $('.thumbs .item').removeClass('active');
        $(this).parent().addClass('active');        
}).on('slid.bs.carousel', function(e) {
    if(!clickEvent) {
        var count = $('.thumbs').children().length -1;
        var current = $('.thumbs .item.active');
        current.removeClass('active').next().addClass('active');
        var id = parseInt(current.data('slide-to'));
        if(count == id) {
            $('.thumbs .item').first().addClass('active');  
        }
    }
    clickEvent = false;
});

我把这个jsfiddle放在一起来展示我想要实现的目标： http://jsfiddle.net/vr3xyqpv/3/

缩略图上的红色边框应在每张幻灯片上保持可见。

首次观看时似乎正常工作，但它跳得很奇怪，一旦你点击缩略图，它就会停止长时间保持活动状态。

Answer 1

这是一种方式：

小提琴：http://jsfiddle.net/ewx61o1k/1/

Js ：

$('#myCarousel').carousel({
    interval:   4000
});

$('#myCarousel').on('slid.bs.carousel', function(){
   var index = $('.carousel-inner .item.active').index();
   $('.thumbs .item[data-slide-to="'+index+'"]').addClass('active');
});

Bootstrap Carousel活动缩略图样式

1 个答案: