javascript - twitter bootstrap carousel 直接链接到特定幻灯片

Question

我在我的网站上使用 Twitter bootstrap carousel 来显示一组图像。我想知道是否可以允许链接链接到轮播中的特定幻灯片。因此，在 10 张幻灯片中，用户可以单击一个链接直接从 href 链接转到第 5 张幻灯片。

bootstrap carousel 是否可行，还是我找错树了？

编辑

您好，所以我在 document.ready 函数下将以下内容添加到我的 javascript 中。

但是输入 url www.example.com/models.php/5 没有任何作用。
我做错了什么吗？

var url = window.location.href;
var slide = url.substring(url.lastIndexOf('/')+1); // 4
goToSlide(slide);

function goToSlide(number) {
    $("#MyCarousel").carousel(number);
}

Answer 1

无 JavaScript 方式

您可以使用 data-slide-to attribute为此，接受从 0 开始的索引表示幻灯片编号。

Use data attributes to easily control the position of the carousel. data-slide accepts the keywords prev or next, which alters the slide position relative to its current position. Alternatively, use data-slide-to to pass a raw slide index to the carousel data-slide-to="2", which shifts the slide position to a particular index beginning with 0.

只需为您的 anchor 添加一个属性，然后就可以开始了。

<a href="#" data-slide-to="5">Go to slide #5</a>

感谢Cawas's comment on this answer和 Jonas's answer on this question .

---

老派的 JavaScript 方式

您需要使用.carousel(number) 函数。

.carousel(number)

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

查看 bootstrap docs.

更具体一点；

创建一个 javascript 函数来调用，它应该是这样的:

function goToSlide(number) {
   $("#carousel").carousel(number);
}

然后，只需在您的链接上添加一个 onClick 事件。

<a href="#" onClick="javascript:goToSlide(5);">Go to slide #5</a>

---

从 URL 获取幻灯片信息

源链接是www.example.com/models.php/4

您可以检查 document.ready 上的 url，如果 url 末尾有一些数据，您只需调用 goToSlide 函数即可。

var url = window.location.href;
var slide = url.substring(url.lastIndexOf('/')+1); // 4

// Remove the trailing slash if necessary
if( slide.indexOf("/") > -1 ) { 
    var slideRmvSlash = slide.replace('/','');
    slide = parseInt(slideRmvSlash);
}
goToSlide(slide);