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

时间:2013-12-16 13:20:11

标签: javascript jquery twitter-bootstrap

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

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

修改

嗨,所以我在document.ready function下的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);
}

3 个答案:

答案 0 :(得分:15)

无JavaScript的方式

您可以使用data-slide-to attribute来接受基于0的索引代表幻灯片编号。

  

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

只需在锚点中添加一个属性,即可离开。

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

感谢Cawas's comment on this answerJonas's answer on this question


老派的JavaScript方式

您需要使用.carousel(number)功能。

  

.carousel(数)

     

将轮播循环到特定的框架(0基于,类似于   数组)。

查看bootstrap docs.

更具体一点;

创建一个要调用的javascript函数,它应该如下所示:

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

然后,只需在链接上添加onClick事件。

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

从网址获取幻灯片信息

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

您可以检查document.ready上的网址,如果网址末尾有一些数据,您只需调用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);

答案 1 :(得分:2)

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

  

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

答案 2 :(得分:1)

根据Seçkin的回答,我必须执行两个小字符串操作才能使slide字符串可用。这两个mod让goToSlide函数正确解析外部链接。

从网址中删除尾部斜杠。 (我的网站的Web服务器插入斜杠。)

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

转换为整数

var slideInt = parseInt(slideRmvSlash);

之后它运作良好。

goToSlide(slideInt)