如何跳转到 Bootstrap 的 Carousel 中的特定项目? [复制]

Posted

技术标签:

【中文标题】如何跳转到 Bootstrap 的 Carousel 中的特定项目? [复制]【英文标题】:How to jump to a specific item in Bootstrap's Carousel? [duplicate] 【发布时间】:2013-01-16 16:25:46 【问题描述】:

使用 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>

【问题讨论】:

我让它工作了。可以在这里找到答案:***.com/questions/9256314/… 【参考方案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.

【讨论】:

我尝试了这两种方法。我将您的 jquery 添加到 bootstrap.js 文件并将“链接”更改为“面板”,但它不起作用。我也尝试将 Panel 放入 【参考方案2】:

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

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

请注意,data-slide-to 索引是基于 0 的,这是在 Bootstrap 4 上测试的

【讨论】:

非常棒,不需要 javascript,正是我想要的。

以上是关于如何跳转到 Bootstrap 的 Carousel 中的特定项目? [复制]的主要内容,如果未能解决你的问题,请参考以下文章

Bootstrap 手风琴在加载时跳转到页面中心

javascript bootstrap跳转到选项卡

bootstrap的日历插件datetimepicker当在年视图点击,选择完年视图后,不想让他跳转到日期的视图,怎么去阻止

Bootstrap Carousel 前进时跳转到页面顶部

使用 Bootstrap 导航选项卡从另一个选项卡跳转到特定选项卡

Bootstrap 崩溃 - 转到打开项目的顶部?