旋转木马缩略图样式不自动更新上点击

Carousel Thumbnail style not auto updating on prev click

本文关键字：更新 略图 样式 旋转木马      更新时间：2023-09-26

我得到了这段美妙的代码来自动更新我的缩略图点击和点击。幻灯片的功能。当通过计时器间隔、单击下一个箭头或单击轮播中的相应缩略图进行自动更新时，它可以正常工作。

$('#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;
    }
});

然而，旋转木马拇指不自动更新时，prev箭头被点击，该代码如何更新，以反映该动作?

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

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

谢谢

我将如何更改代码以选择缩略图。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');    
});
相关文章：