如何在JS/jQuery点击事件中调用轮播特定幻灯片？指定data-slide-to无响应

没问题，我帮你理清楚这个问题——你之前的用法有点小偏差，Bootstrap的Carousel API其实提供了直接跳转到指定索引幻灯片的方法，很容易解决。

首先，先纠正你之前的错误写法：你写的$(this).data('slide-to',0)是设置这个data属性的值为0，而不是获取它。而且调用Carousel跳转的正确方式是传入目标幻灯片的索引（从0开始计数），不是这种写法。

正确的实现步骤 #

1. 确保你的轮播已经正确初始化：不管是通过HTML的data-ride="carousel"属性，还是在JS里提前调用$('#header').carousel()，这是基础。
2. 在点击事件中获取目标索引：从触发点击的元素上读取data-slide-to的属性值，jQuery的.data()会自动把数字类型的data值转换成数字，不用额外处理。
3. 调用Carousel的跳转方法：用$('#header').carousel(目标索引)就能直接跳转到对应幻灯片。

完整代码示例 #

假设你的触发元素是这样的（比如按钮或导航项）：

<button class="slide-jump-btn" data-slide-to="0">跳转到第一张</button>
<button class="slide-jump-btn" data-slide-to="2">跳转到第三张</button>

对应的JS代码：

// 给所有跳转按钮绑定点击事件
$('.slide-jump-btn').on('click', function() {
  // 获取当前点击元素指定的目标幻灯片索引
  var targetIndex = $(this).data('slide-to');
  // 调用carousel方法跳转到对应幻灯片
  $('#header').carousel(targetIndex);
});

额外注意事项 #

• 幻灯片的索引是从0开始的，所以data-slide-to="0"对应第一张，data-slide-to="1"对应第二张，以此类推。
• 如果你的触发元素是动态生成的（比如后来通过JS添加到页面的），需要用事件委托来绑定点击事件，避免失效：

  $(document).on('click', '.slide-jump-btn', function() {
    var targetIndex = $(this).data('slide-to');
    $('#header').carousel(targetIndex);
  });
  

• 如果你想在跳转后立即恢复轮播自动播放，可以在调用后加上.carousel('cycle')，默认跳转后轮播会保持之前的播放状态。

这样写应该就能完美实现点击跳转到指定幻灯片的需求了～

内容的提问来源于stack exchange，提问作者Nithin P.H