我有一个带有html内容显示滑动的自举轮播。
这里的问题是,它可以正常工作到第9个缩略图,但是当单击第11和第12个缩略图时,它会滑回到第一个内容框,而不是各自的ID。
这是使用的脚本
$('#myCarousel').carousel({
pause: true,
interval: false
});
// 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');
});
$('#myCarousel').bind('slide.bs.carousel', function (e) {
var slideFrom = $(this).find('.active').index();
var videoContent = $('.item[data-slide-number='+slideFrom+'] .embed-responsive');
videoContent.html( videoContent.html() );
});
// when the carousel slides, auto update
$('#myCarousel').on('slid.bs.carousel', function (e) {
var id = $('.item.active').data('slide-number');
id = parseInt(id);
$('[id^=carousel-selector-]').removeClass('selected');
$('[id=carousel-selector-'+id+']').addClass('selected');
});
任何帮助表示赞赏!
DEMO
最佳答案
采用:
var parts = id_selector.split("-");
var id = parts[parts.length - 1]
代替
var id = id_selector.substr(id_selector.length -1);
因为如果选择
id
,则只会得到0
的最后一个字符,即10
。相反,我在
-
之后取了最后一个字/值。Working Fiddle