使用 Bootstrap 的轮播,我希望能够单击链接并跳转到轮播中的特定幻灯片。我怎么做?我必须添加什么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>
最佳答案
如果您的链接与面板的顺序相同,您可以执行以下操作:
$('.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.
关于jquery - 如何跳转到Bootstrap的轮播中的特定项目?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14644929/