Question

我得到了这个奇妙的代码片段，可以在点击和bs.slide函数上自动更新我的缩略图。通过计时器间隔自动更新，单击下一个箭头或单击轮播中相应的缩略图时，它可以正常工作。

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

var selectorIdx = 1;
var numItems = 12;

// handles the carousel thumbnails
$('.carousel-selector').click(function () {
    selectorIdx = $(this).closest('li').index();
    $('#myCarousel').carousel(selectorIdx)
});

$('#myCarousel').on('slide.bs.carousel', function () {
    $('#myCarousel')
        .find('.carousel-selector')
        .removeClass('selected')
        .eq(selectorIdx).addClass('selected')
        .end()
        .find('.item').removeClass('selected')
        .eq(selectorIdx).addClass('active');

    if (selectorIdx < (numItems - 1)) {
        selectorIdx++;
    }
    else {
        selectorIdx = 0;
    }
});

然而，当点击上一个箭头时，旋转木马的拇指不会自动更新，如何更新此代码以反映该操作？

粗糙小提琴，你可以看到当你按下前箭头时，拇指仍然向前而不是向后更新。

http://jsfiddle.net/gward90/xr8qzxmg/12/

谢谢

Answer 1

以下是我将如何更改代码以选择缩略图。 http://jsfiddle.net/xr8qzxmg/15/

$('#myCarousel').on('slide.bs.carousel', function (e) {
    selectorIdx = $(e.relatedTarget).index();
    $(this)
        .find('.carousel-selector').removeClass('selected')
        .eq(selectorIdx).addClass('selected')
        .end()
        .find('.item').removeClass('selected')
        .eq(selectorIdx).addClass('active');    
});

轮播缩略图样式不会在上一次点击时自动更新

1 个答案: