基于DOM元素而不是索引跳过Bootstrap Carousel中的另一张幻灯片

Question

我希望能够跳过Bootstrap轮播幻灯片堆栈中的特定幻灯片，该幻灯片基于元素（例如，id或类）值而不是Bootstrap文档中描述的幻灯片索引。有没有人开发出一种优雅的方法来做到这一点，他们可以分享？

Answer 1

我不确定这是最优雅的方法，如果不希望其他人会增加更好的方法。当我加载轮播幻灯片的数据时，我创建了一个幻灯片索引数组与用户想要跳过的元素。当用户请求跳转到元素时（使用导航栏上的按钮），我通过查找.active类并从当前视图中提取html来识别当前位置。这个HTML包含感兴趣元素的标识符，可以在substring（）提取后使用它来查找幻灯片索引数组中的索引，然后在$（＆＃39; #carousel＆＃39;）中使用该索引。圆盘传送带（索引）。

Answer 2

以下是一个似乎运作良好的解决方案示例：

http://www.bootply.com/2VP1T6PGxW

每张幻灯片都有一个索引存储在元素的data-*属性（data-* documentation）中。它还有一个ID，稍后将被引用：

<div class="item active" id="firstSlide" data-index="0">

按下按钮时，使用jQuery查找DOM元素并拉出data-index然后使用Bootstrap轮播函数，如下所示：

var index = $("#secondSlide").data('index');
$("#carousel-example-generic").carousel(index);