引导轮播-链接到特定的幻灯片 [英] Bootstrap carousel - link to specific slide

问题描述

在html中显示当前幻灯片编号以及链接到当前页面上的特定幻灯片方面，我发现了很多帮助，但是我的问题有点不同...

I have found a lot of help on displaying the current slide number in the html and linking to a particular slide on the current page but my question is a little different...

我需要能够链接到另一页中轮播中的特定幻灯片.所以我会有类似的东西:'index.html'上的href ="page2.html#slide2"

I need to be able to link to a particular slide in the carousel in another page. So I will have something like: a href="page2.html#slide2" on 'index.html'

当用户单击此链接时，会将他们带到"page2.html"页面，并显示第二张幻灯片.

When the user clicks this link, it takes them to the 'page2.html' page and with the second slide displayed.

感谢您的帮助. 谢谢， 亚历克斯

Any help is appreciated. Thanks, Alex

推荐答案

您可以使用查询字符串，例如... www.example.com?slide=2

You can use a query string like... www.example.com?slide=2

$(document).ready(function(){

    function getParameterByName(name) {
        name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
        var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
            results = regex.exec(location.search);
        return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
    }

    $('#myCarousel').carousel(getParameterByName('slide'));
});

或哈希值，例如www.example.com#2

Or hash values like... www.example.com#2

$(document).ready(function(){
    $('#myCarousel').carousel(window.location.hash.substring(1));
});

无论您使用哪种方法，都只需从url中提取一个整数，因此您可能希望使代码更健壮，以确保仅在获得有效整数的情况下才移动轮播，并检查其是否正确在轮播中存在的幻灯片数量的范围内.

Which ever you use, you have to only extract an integer from the url, so you may want to make the code a little more robust to ensure you are only moving the carousel if you get a valid integer and also check that it is within the bounds of the number of slides that exist within the carousel.

.carousel(number)

将轮播循环到特定帧(从0开始，类似于数组).

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