In your example you added your JS in page 2, but your link redirects the user to page 1. Make sure you get your URLs correct, so based on your example it should be <a href="page2.html#slide=2">slide 2</a> on page 1.
Furthermore, the function function qs(key) {..} extracts the hash on ? not on #.
Don't worry though, what you want is simple, so I wrote a quick example for you.
Explaining the snippet below
You can achieve your desired functionality without needing jQuery.
In my example I created a function called getSlideNumber(). This first checks if the location hash exists, then we get it's value and split it on the = to get to the slide number. After that, we convert value into an integer using parseInt(). If that fails, the parseInt() function returns NaN so we also make sure our slide number is in fact an integer before we return it using Number.isInteger(). This way we protect ourselves against any malicious hashes.
We then call that function to get our slide number and use Bootstrap's method getOrCreateInstance to get the carousal instance that's on our page and make it cycle to the slide number using to().
And that's all it is!
Usage
We can't extract a hash in a snippet, so I don't call the function getSlideNumber() in my example. Therefore, make sure you delete the line const slideNumber = 2 and remove the // in front of the line above it when you want to use this code for your own project. Like so:
const slideNumber = getSlideNumber();
const element = document.querySelector('#carouselExample')
const caroursal = bootstrap.Carousel.getOrCreateInstance(element).to(slideNumber);
Also, note that the first slide of a carousal has an index of 0, similar to an array.
Lastly, you can edit the carousal HTML as you please, I used the basic example from the documentation.
The snippet
window.onload = function(){
function getSlideNumber() {
if(location.hash && location.hash.length) {
const value = location.hash.substr(1).split('=')[1];
const int = parseInt(value);
if (Number.isInteger(int)) {
return int;
} else {
return 0;
}
}
return 0;
}
//const slideNumber = getSlideNumber();
const slideNumber = 2; // Uncomment the line above and remove this line, it's only for demonstration purposes.
const element = document.querySelector('#carouselExample')
const caroursal = bootstrap.Carousel.getOrCreateInstance(element).to(slideNumber);
};
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<div class="container">
<div id="carouselExample" class="carousel slide">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://www.w3schools.com/bootstrap/chicago.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://www.w3schools.com/bootstrap/la.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://www.w3schools.com/bootstrap/ny.jpg" class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
Solution with jQuery
But wait! What if you can't live without jQuery? Worry no more, use this instead:
$(document).ready(function() {
function getSlideNumber() {
if(location.hash && location.hash.length) {
const value = location.hash.substr(1).split('=')[1];
const int = parseInt(value);
if (Number.isInteger(int)) {
return int;
} else {
return 0;
}
}
return 0;
}
const slideNumber = getSlideNumber();
$("#carouselExample").carousel(slideNumber);
});
Multiple carousals on one page
Assuming all carousals should be set to slideNumber we can target all carousals on the page with the class .carousal and then loop through them, like so:
const slideNumber = getSlideNumber();
const carousels = document.querySelectorAll('.carousel');
carousels.forEach(carousel => {
bootstrap.Carousel.getOrCreateInstance(carousel).to(slideNumber);
});
This works fine, but all carousals will cycle to the same slideNumber. If say your hash contains multiple values like page2.html#slide=2&slide=3 and you want the second carousal to cycle to slide 3 you would have to make getSlideNumber() return an object with all the slide numbers, then get the id of carousal inside the forEach loop and apply the corresponding slide number you have in the previous mentioned object in the to() method on the carousal id. That would be just one possible way of doing it.
Hope that helps. Good luck!
