Question

使用Bootstrap的Carousel，我希望能够点击链接并跳转到旋转木马中的特定幻灯片。我怎么做？我必须添加什么jquery？

这是我的HTML（它不起作用但让你对我想做的事情有所了解）：

<a href="#panel">Panel</a>

<div id="myCarousel" class="carousel slide">
 <div class="carousel-inner">
  <div id="panel" class="item">
...
  </div>
 </div>
</div>

Answer 1

如果您的链接与面板的顺序相同，则可以执行以下操作：

$('.link').on('click', function() {
    $('#carousel').carousel($(this).index());
});

如果您只有一个链接，只需对其进行硬编码：

var i = 2; //index of the panel    
$('#link').on('click', function() {
    $('#carousel').carousel(i);
});

来自文档：

Methods:

carousel(options)

Initializes the carousel with an optional options object and starts cycling through items.

$('.carousel').carousel({
  interval: 2000
})
.carousel('cycle')

Cycles through the carousel items from left to right.

.carousel('pause')

Stops the carousel from cycling through items.

.carousel(number)

Cycles the carousel to a particular frame (0 based, similar to an array).

.carousel('prev')

Cycles to the previous item.

.carousel('next')

Cycles to the next item.

Answer 2

对我来说，指定的脚本方法不起作用，但是根据另一个示例，我能够使用数据标签使其起作用

<a data-target="#myCarousel" data-slide-to="0" href="#">First</a>

请注意，data-slide-to索引基于0，并且已在Bootstrap 4上进行了测试

如何跳转到Bootstrap旋转木马中的特定项目？

2 个答案: