Question

我有一个Bootstrap轮播和缩略图指示器，但我不知道为什么总是选择第二个缩略图。我正在使用bootstrap 3.0

这是小提琴

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

// handles the carousel thumbnails
$('[id^=carousel-selector-]').click( function(){
var id_selector = $(this).attr("id");
var id = id_selector.substr(id_selector.length -1);
id = parseInt(id);
$('#myCarousel').carousel(id);
$('[id^=carousel-selector-]').removeClass('selected');
$(this).addClass('selected');
});

// when the carousel slides, auto update
$('#myCarousel').on('slid', function (e) {
var id = $('.item.active').data('slide-number');
id = parseInt(id);
$('[id^=carousel-selector-]').removeClass('selected');
$('[id^=carousel-selector-'+id+']').addClass('selected');
});

希望你能帮助我

Answer 1

这是解决了你的问题。

解决方案：jsfiddle

旧代码

<div class="item" data-slide-to="1">
    <img src="http://placehold.it/1200x480/888/FFF" class="img-responsive">
</div>

新代码

<div class="item" data-slide-number="1">
    <img src="http://placehold.it/1200x480/888/FFF" class="img-responsive" />
</div>

你的错误是错误的分配类 data-slide-to =“1”。我替换为 data-slide-number =“1”。

另一个是全部关闭＆lt; img ＆gt;正确标记。它突出显示无效的编码验证。

选择Bootstrap指示器缩略图

1 个答案: