Why won't the JavaScript work when linking to a carousel slide from another page?

Question

Why won't the JavaScript work when linking to a carousel slide from another page?

Trying to follow this 6-year-old guide, but my JavaScript isn't triggering when the URL contains #slide_ - have things changed?

Linking to a specific Bootstrap carousel slide from another page

My code on page 2:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
    
    <!-- Core theme CSS (includes Bootstrap)-->
        <link href="css/styles.css?v20221223=1" rel="stylesheet" />
</head>

<body>

         
<!-- Carousel Wrapper-->

        
<div id="myCarousel" class="carousel carousel-dark slide" data-bs-interval="false" data-ride="carousel" data-pause="hover">
  
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://www.w3schools.com/bootstrap/chicago.jpg" alt="..." class="d-block img-fluid">
    </div>
    <div class="carousel-item">
      <img src="https://www.w3schools.com/bootstrap/la.jpg" alt="..." class="d-block img-fluid">
    </div>
    <div class="carousel-item">
      <img src="https://www.w3schools.com/bootstrap/ny.jpg" alt="..." class="d-block img-fluid">
    </div>
   </div>
</div>
</div>
<!-- END Carousel Wrapper-->

<!-- Bootstrap core JS - versionas as of Dec 2022-->
        <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a4c6cbcbd0d7d0d6c5d4e4918a978a9489c5c8d4cc">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
    
    <!-- JS for loading a particular slide from another page -->
        <script>
            
            function qs(key) {
                key = key.replace(/[*+?^$.\[\]{}()|\\\/]/g, "\\$&"); 
                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; 
                }
            //why is this not working???
            $('#myCarousel').carousel(qs('slide'));
        </script>
    
</body>
</html>

And the link on page 1

<a href="page1.html#slide=2">slide 2</a>

Feeling stuck...

javascript bootstrap-5

Answer 1

Answer №1

When you provided your example, the JavaScript was added on page 2, yet the link directed the user to page 1. It's crucial to ensure that your URLs are correct. Following your example, the link should be

<a href="page2.html#slide=2">slide 2</a>

on page 1.

Additionally, the function function qs(key) {..} extracts the hash on ?, not on #.

However, achieving what you desire is simple. I have provided a brief example for your reference.

Explanation of the snippet below:

You can achieve the desired functionality without relying on jQuery.

In my demonstration, I introduced a function named getSlideNumber(). This function first checks for the existence of the location hash, retrieves its value, splits it using = to access the slide number, then converts the extracted value into an integer using parseInt(). To safeguard against malicious hashes, I ensured the slide number is indeed an integer by utilizing Number.isInteger().

We invoke this function to obtain the slide number and utilize Bootstrap's method getOrCreateInstance to access the carousel instance on our page and cycle it to the specified slide number using to().

It's really as straightforward as that!

Usage:

Due to limitations in extracting a hash within a snippet, I did not call the function getSlideNumber() in my example. Therefore, make sure to remove the line const slideNumber = 2 and uncomment the line above it when integrating this code into your project. Here's how:

  const slideNumber = getSlideNumber(); 
  const element = document.querySelector('#carouselExample')
  const caroursal = bootstrap.Carousel.getOrCreateInstance(element).to(slideNumber);

Remember, the initial slide of a carousel has an index of 0, aligning with an array structure.

Lastly, feel free to customize the carousel HTML according to your preferences. For my demonstration, I utilized the basic example outlined in the documentation provided byBootstrap.

The code snippet:

... (Rest of the text remains unchanged)

Answer 2

When you provided your example, the JavaScript was added on page 2, yet the link directed the user to page 1. It's crucial to ensure that your URLs are correct. Following your example, the link should be

<a href="page2.html#slide=2">slide 2</a>

on page 1.

Additionally, the function function qs(key) {..} extracts the hash on ?, not on #.

However, achieving what you desire is simple. I have provided a brief example for your reference.

Explanation of the snippet below:

You can achieve the desired functionality without relying on jQuery.

In my demonstration, I introduced a function named getSlideNumber(). This function first checks for the existence of the location hash, retrieves its value, splits it using = to access the slide number, then converts the extracted value into an integer using parseInt(). To safeguard against malicious hashes, I ensured the slide number is indeed an integer by utilizing Number.isInteger().

We invoke this function to obtain the slide number and utilize Bootstrap's method getOrCreateInstance to access the carousel instance on our page and cycle it to the specified slide number using to().

It's really as straightforward as that!

Usage:

Due to limitations in extracting a hash within a snippet, I did not call the function getSlideNumber() in my example. Therefore, make sure to remove the line const slideNumber = 2 and uncomment the line above it when integrating this code into your project. Here's how:

  const slideNumber = getSlideNumber(); 
  const element = document.querySelector('#carouselExample')
  const caroursal = bootstrap.Carousel.getOrCreateInstance(element).to(slideNumber);

Remember, the initial slide of a carousel has an index of 0, aligning with an array structure.

Lastly, feel free to customize the carousel HTML according to your preferences. For my demonstration, I utilized the basic example outlined in the documentation provided byBootstrap.

The code snippet:

... (Rest of the text remains unchanged)

Why won't the JavaScript work when linking to a carousel slide from another page?

Answer №1

Similar questions

Absence of reactions visible

Include the document when the query results in zero documents

display and conceal a division by clicking a hyperlink

Examining an array to identify palindromes

Is it possible to transform all scripts into a React component? (LuckyOrange)

Pagination malfunction on AngularJS md-data-table is causing issues

Which callback function is best suited for handling the response in an XMLHttpRequest and rendering it on the webpage?

What is the best way to achieve this particular grid layout using html and css?

Methods for removing cookie during logout with Express and Passport JS?

The IISNode website displays directory contents instead of launching the server.js file

How to ensure NodeJS waits for a response before returning a value

Close pop-up upon successful AJAX response in ASP.NET MVC

Using Svelte to effectively connect to a specified object within an array

Creating numerous Facebook posts using jQuery technology

Looping through an object with AngularJS's ng-repeat

Tips for extracting title and image from someone else's blog posts to share on your own website

Tips for creating a reusable function in React.js?

Tips for customizing the `src/app/layout.tsx` file in Next.js 13

What steps can I take to resolve this issue when encountering an error during npm install?

Is it possible to utilize curly brackets in JavaScript for dividing code segments?