Linking to a certain bootstrap carousel slide from another page

Question

I have two .html pages: page1.html and page2.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>

(That is the most important part)

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.

Sorry I didn't link correctly. I corrected that, and I copied that code into page2.html (in between two — E.Arrowood, Dec 31 '15 at 00:01

score 0 · Accepted Answer · edited May 23 '17 at 12:02

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

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

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

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

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>

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>

That's all there is to it.

Thank you! Works perfectly :) – E.Arrowood Dec 31 '15 at 02:15 — E.Arrowood, Dec 31 '15 at 02:15

Linking to a certain bootstrap carousel slide from another page

1 Answers1

Linked