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

Question

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

这是可能的自助旋转木马还是我咆哮错误的树？

编辑

嗨，所以我在document.ready函数下添加了以下javascript。

但是，在网址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属性 ，接受从0开始的索引表示幻灯片编号。

使用数据属性可以轻松控制轮播的位置。 data-slide接受关键字prev或next ，这会改变相对于当前位置的幻灯片位置。 或者，使用data-slide-to将原始幻灯片索引传递给轮播data-slide-to="2" ，这会将幻灯片位置移动到以0开头的特定索引。

只需在锚点中添加一个属性，然后就可以了。

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

感谢Cawas对这个答案的评论以及Jonas对这个问题的回答 。

---

老派的JavaScript方式

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

.carousel（数字）

将轮播循环到特定帧（基于0，类似于数组）。

查看bootstrap文档。

更具体;

创建一个要调用的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);

Answer 2

我想你正在寻找这个http://getbootstrap.com/javascript/#carousel

使用数据属性可以轻松控制轮播的位置。 data-slide接受关键字prev或next ，这会改变相对于当前位置的幻灯片位置。 或者，使用data-slide-to将原始幻灯片索引传递给轮播data-slide-to="2" ，这会将幻灯片位置移动到以0开头的特定索引。

Answer 3

继续Seçkin的回答，我不得不执行两个小的字符串操作来使我的slide可用。 这两个mod让goToSlide函数正确地解析外部链接。

从URL中删除尾部斜杠。 （我的网站的Web服务器插入斜杠。）

var slideRmvSlash = slide.replace('/','');

转换为整数

var slideInt = parseInt(slideRmvSlash);

之后它运作良好。

goToSlide(slideInt)