轮播缩略图仍然不会自动更新

Question

使用缩略图构建旋转木马时，缩略图应与显示的幻灯片相对应，并且所选缩略图应在其周围有边框，以便用户知道他们所在的幻灯片。 我当前的代码只是选择了缩略图，他们应该用旋转木马的每张幻灯片自动更新，我做错了什么？

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

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

$('#myCarousel')
  .carousel(selectorIdx)
  .find('.carousel-selector').removeClass('selected')
  .eq(selectorIdx).addClass('selected')
  .end()
  .find('.item').removeClass('selected')
  .eq(selectorIdx).addClass('active');
});

小提琴http://jsfiddle.net/gward90/xr8qzxmg/9/

Answer 1

解决此问题的最佳方法是使用slide.bs.carousel事件来更改“活动”缩略图。

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

var selectorIdx = 1;
var numItems = $('.carousel-selector').length;

// 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;
});

的jsfiddle