在基于DOM元素而非索引的引导旋转木马中跳到另一张幻灯片

Skipping to Another Slide in Bootstrap Carousel Based on DOM Element Instead of Index

本文关键字：幻灯片 一张 旋转木马 元素 DOM 索引      更新时间：2023-09-26

我希望能够根据元素（例如id或class）值而不是Bootstrap文档中描述的幻灯片索引，跳到Bootstrap转盘幻灯片堆栈中的特定幻灯片。有人开发出一种优雅的方法来做这件事吗？他们可以分享吗？

下面是一个运行良好的解决方案示例：

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

每张幻灯片都有一个索引，存储在元素的data-*属性（data-*文档）中。它还有一个ID供以后参考：

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

按下按钮后，使用jQuery查找DOM元素并拉出data-index，然后使用引导转盘功能，如文档所示：

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

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

相关文章：