旋转木马缩略图仍然不能自动更新

Carousel Thumbnails still not auto updating

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

使用缩略图构建轮播，缩略图应该与显示的幻灯片对应，所选的缩略图周围应该有边框，以便用户知道他们在哪个幻灯片上。我目前的代码只是有缩略图选择的onclick，他们应该是自动更新与旋转木马的每张幻灯片，我做错了什么?

$('#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/

最好的方法是使用slide.bs.carousel事件来更改"active"缩略图。

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

相关文章：