基于DOM元素而不是索引跳转到引导程序传送带中的另一张幻灯片

Question

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

Answer 1

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

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);