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

twitter bootstrap carousel link directly to a specific slide

提问by user3004208

I am using twitter bootstrap carousel on my website to display a set of images. i am wondering if it is possible to allow a link to link to a specific slide in the carousel. So out of 10 slides a user can click a link to go directly to say slide 5 from a href link.

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

Is this possible with bootstrap carousel or am i barking up the wrong tree?

这是否可以使用 bootstrap carousel 或者我是否在错误的树上吠叫？

EDIT

编辑

Hi, so i have added the following to my javascript under document.ready function.

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

However typing in the url www.example.com/models.php/5doesnt do anything.
Am i doing something wrong?

然而，输入 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);
}

回答by mehmetseckin

The JavaScript-free way

不使用 JavaScript 的方式

You can use data-slide-toattributefor this, which accepts 0-based indexes represents the slide number.

您可以为此使用data-slide-to属性，它接受基于 0 的索引表示幻灯片编号。

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

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

Just add an attribute to your anchor, and off you go.

只需为您的锚点添加一个属性，然后就可以了。

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

Thanks to Cawas's comment on this answerand Jonas's answer on this question.

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

---

---

The old-school JavaScript way

老派的 JavaScript 方式

You need to use the .carousel(number)function.

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

.carousel(number)

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

.carousel（数字）

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

Check out the bootstrap docs.

查看引导程序文档。

To be more specific;

更具体;

Create a javascript function to call, it should look like this :

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

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

And then, just add an onClick event on your link.

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

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

---

---

Getting the slide info from the URL

从 URL 获取幻灯片信息

The source link is www.example.com/models.php/4

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

You could check the url on document.ready, and if there's some data at the end of the url, you simply invoke your goToSlide function.

您可以检查 url 上的 url document.ready，如果 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);

回答by Jonas Grumann

I think you're looking for this http://getbootstrap.com/javascript/#carousel

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

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

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

回答by Barry

Following up on Se?kin's answer, I had to perform two small string operations to make my slidestring usable. These two mods let the goToSlidefunction correctly parse external links.

按照 Se?kin 的回答，我必须执行两个小的字符串操作才能使我的slide字符串可用。这两个模块让goToSlide函数正确解析外部链接。

Strip trailing slash from url. (My site's web server inserts the slash.)

从 url 中去除尾部斜杠。（我站点的 Web 服务器插入了斜杠。）

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

Convert to an integer

转换为整数

var slideInt = parseInt(slideRmvSlash);

It worked fine after that.

在那之后它工作得很好。

goToSlide(slideInt)