Bootstrap Carousel的问题

我遇到了Bootstrap carousel的问题。我使用的是我在Bootply上找到的一个使用缩略图导航来选择可见图像的示例。我遇到的问题是，一旦项目id增加到两位数字，jQuery中的子串行阻止它正确显示。我假设，因为它正在切断其中一个数字。Bootstrap Carousel的问题

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

我不太确定我要去哪里错，任何帮助将不胜感激。

这里是整个Bootply链接：http://www.bootply.com/5Ndty8EZZ2

来源

2016-02-08 James Ives

的问题是你的HTML DIV <div class="carousel-inner">已接近年初。你应该在你最后的<div class="item" data-slide-number="12"> div之后关闭它。

编辑：

还有一个问题，你怎么芦苇点击一个拇指后滑数。就在数据幻灯片编号属性添加到每个立像这样：

<li> 
    <a id="carousel-selector-1" data-slide-number="1"> 
     <img src="http://placehold.it/80x60&amp;text=two" class="img-responsive"> 
    </a> 
</li>

然后用var id = $(this).attr('data-slide-number');你的点击函数中：

// handles the carousel thumbnails 
$('[id^=carousel-selector-]').click(function(){ 

    var id = $(this).attr('data-slide-number'); 

    id = parseInt(id); 
    $('#myCarousel').carousel(id); 
    $('[id^=carousel-selector-]').removeClass('selected'); 
    $(this).addClass('selected'); 
});

链接：http://www.bootply.com/dqUl7lt89B

来源

2016-02-08 23:27:13 om1

这并不能解决问题。在你的例子中尝试点击十三，你会看到相应的幻灯片不显示。它代表三个。 –

你是对的。您在如何使用幻灯片编号方面也存在问题。我已经更新了我的答案。 – om1

这仍然不起作用。现在唯一可选的是十三个 –

Bootstrap Carousel的问题

回答

相关问题