twitter bootstrap carousel直接链接到特定幻灯片 [英] twitter bootstrap carousel link directly to a specific slide

问题描述

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

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.

这是否可以使用bootstrap轮播或者我咆哮错误的树？

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

编辑

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

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

但输入网址 www.example.com/models.php/5 什么都不做。

我做错了什么？

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

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的索引代表幻灯片编号。

The JavaScript-free way

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

使用数据属性可以轻松控制轮播的位置。 data-slide 接受关键字 prev 或 next ，其中相对于当前位置改变滑动位置。或者，使用 data-slide-to 将原始幻灯片索引传递给轮播 data-slide-to =2，它将幻灯片位置转换为以 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.

只需向锚点添加一个属性，然后离开即可。

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

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

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

您需要使用 .carousel（数字） ） function。

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

.carousel（number）

.carousel(number)

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

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

查看< a href =http://getbootstrap.com/javascript/#via-data-attributes-4 =nofollow noreferrer> bootstrap docs。

更具体一点;

创建一个要调用的javascript函数，它应该看起来像这个：

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

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

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

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

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

---

从网址获取幻灯片信息

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

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

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.

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);

这篇关于twitter bootstrap carousel直接链接到特定幻灯片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！