Javascript 转盘缩略图仍无法自动更新

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

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

拨弄

---

执行此操作的最佳方法是使用

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

$（'myCarousel'）。carousel({
间隔时间：4000
});
var selectorIdx=1；
var numItems=$（'.carousel选择器'）.length；
//处理旋转木马缩略图
$（'.carousel选择器'）。单击（函数（）{
selectorIdx=$（this.closest（'li'）.index（）；
$（'#myCarousel'）。carousel（selectorIdx）
});
$（'#myCarousel'）。on（'slide.bs.carousel'，函数（）{
$（“#myCarousel”）
.find（'.carousel选择器'）.removeClass（'selected'））
.eq（selectorIdx）.addClass（'selected'）
(完)
.find（'.item'）.removeClass（'selected'））
.eq（selectorIdx）.addClass（'active'）；
如果（选择项DX<（numItems-1））
选择器DX++；
其他的
selectorIdx=0；
});

---

@imtheman谢谢你有没有办法做到这一点而不声明幻灯片的数量？这个旋转木马结构适用于许多页面。每个项目的幻灯片数量可能不同。您可以替换

var numItems=12带有
var numItems=$（'.carousel选择器'）。长度