twitter引导程序转盘直接链接到特定幻灯片

twitter bootstrap carousel link directly to a specific slide

本文关键字：幻灯片 链接 引导程序 twitter      更新时间：2023-09-26

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

这可能是引导转盘吗？还是我找错树了？

编辑

嗨，所以我在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);
}

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)函数。

.转盘（编号）

将转盘循环到特定帧（基于0，类似于阵列）。

查看引导程序文档。

更具体地说；

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

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

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

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

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

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

转换为整数

var slideInt = parseInt(slideRmvSlash);

之后一切都很顺利。

goToSlide(slideInt)
相关文章：