链接到另一页上的某个Bootstrap轮播幻灯片 [英] Linking to a certain bootstrap carousel slide from another page

问题描述

我有两个.html页面:page1.html和page2.html

I have two .html pages: page1.html and page2.html

在page1.html中，我有一个旋转木马

In page1.html I have a carousel

<!-- First -->
        <div class="item">
            <div class="container-fluid">
                <div class="row">
                    <h2 class="carousel-text">Item 1</h2>
                </div>
            </div>
        </div>
<!-- Second -->
        <div class="item">
            <div class="container-fluid">
                <div class="row">
                    <h2 class="carousel-text">Item 2</h2>
                </div>
            </div>
        </div>

  <!-- Third -->
        <div class="item">
            <div class="container-fluid">
                <div class="row">
                    <h2 class="carousel-text">Item 3</h2>
                </div>
            </div>
        </div>

(那是最重要的部分)

在page2.html中，我有一个链接:

In page2.html I have a link:

<a href="page1.html">Click me to go to page 3!</a>

我要在链接和轮播中添加哪些内容以使其正常工作?我找到了此答案，但不知道如何实现.

What do I add to the link and my carousel to make it so this all works as it should? I found this answer but do not understand how to implement it.

推荐答案

这是您

Here's the code from your link I have added comments to explain what it's doing.

function getSlideParameter(key) {
/*I'm not sure why would anyone choose a key with these special characters but,
* but if they do, following RegEx will replace those special characters
*/
key = key.replace(/[*+?^$.\[\]{}()|\\\/]/g, "\\$&"); // escape RegEx meta chars
//searches the URL for occurrence of &key=some number, in case key is 'slide' it's searching for &slide=some number
var match = location.search.match(new RegExp("[?&]" + key + "=([^&]+)(&|$)"));
//replaces any '+' with single space
var slide = match && decodeURIComponent(match[1].replace(/\+/g, " "));
//checking if 'slide' is an integer and not float and that 'slide' is not a string
if (Math.floor(slide) == slide && $.isNumeric(slide))
    return parseInt(slide);
else
    return 0;//if 'slide' parameter is not present or doesn't have correct values load 0th slide
}
//finally load a particular slide using qs() function
$('#myCarousel').carousel(getSlideParameter('slide'));

此功能只是试图查找URL名为'slide'的查询参数的值.

This function is just trying to find value of the URL's query parameter named 'slide'.

因此，如果当前网址为http://stackoverflow.com?hello&slide=2 getSlideParameter('slide')，则会为我们提供2.

So if current url is http://stackoverflow.com?hello&slide=2 getSlideParameter('slide') would give us 2.

此代码将添加到轮播幻灯片所在的页面(在您的情况下为第1页).

This code is to be added to the page where your carousel slide resides, in your case it's page 1.

将其添加到页面底部或使用jQuery的ready()函数.

Add it to the bottom of the page or using jQuery's ready() function.

<!-- First -->
<div class="item">
    <div class="container-fluid">
        <div class="row">
            <h2 class="carousel-text">Item 1</h2>
        </div>
    </div>
</div>
<!-- Second -->
<div class="item">
    <div class="container-fluid">
        <div class="row">
            <h2 class="carousel-text">Item 2</h2>
        </div>
    </div>
</div>

<!-- Third -->
<div class="item">
    <div class="container-fluid">
        <div class="row">
            <h2 class="carousel-text">Item 3</h2>
        </div>
    </div>
</div>
<script>
    //preparation of carousel
</script>
<!-- new script for loading a particular slide -->
<script>
    (function () {
        function getSlideParameter(key) {
            key = key.replace(/[*+?^$.\[\]{}()|\\\/]/g, "\\$&"); // escape RegEx meta chars
            var match = location.search.match(new RegExp("[?&]" + key + "=([^&]+)(&|$)"));
            var slide = match && decodeURIComponent(match[1].replace(/\+/g, " "));
            if (Math.floor(slide) == slide && $.isNumeric(slide))
                return parseInt(slide);
            else
                return 0;//if 'slide' parameter is not present or doesn't have correct values load 0th slide
        }
        $('#myCarousel').carousel(getSlideParameter('slide'));
    })();
</script>

现在，我们终于可以将链接指向第2页中的特定幻灯片了，如下所示

Now finally we can give the link to specific slide in page2 as below

<a href="page1.html?slide=1">Slide 1!</a>
<a href="page1.html?slide=3">Slide 3!</a>

仅此而已.

这篇关于链接到另一页上的某个Bootstrap轮播幻灯片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！