Update Bootstrap Carousel based on window.location.hash

Question

The code below updates the hash based on the carousel slide - I'm looking to update the slide based on the hash. The question explains it pretty well.

There's a great way to update the window.location.hash onslide

var url = document.location.toString();
if (url.match('#')) {
// Clear active item
$('#my-carousel-id .carousel-inner .item.active').removeClass('active');

// Activate item number #hash
$('.carousel-inner div:nth-child(' + url.split('#')[1] + ')').addClass('active');
}

$('#my-carousel-id').bind('slid', function (e) {
// Update location based on slide (index is 0-based)
window.location.hash = "#"+ parseInt($('#my-carousel-id .carousel-inner .item.active').index()+1);
});

This is from: http://www.ozmonet.com/2013/01/08/tweaking-the-bootstrap-carousel/ Here is his example: http://www.ozmonet.com/photography/

However

I would like to update this code to listen for the hash change and update the carousel.

Here is a good reference: https://developers.google.com/tv/web/articles/location-hash-navigation#detect-loc-hash

The purpose of this is to take the existing code, and get it to work with the browsers back button.

You'll notice with the demo I linked to ( http://www.ozmonet.com/photography/ ) that the back button updates the hash; however, it just needs to update the carousel.

This should be a solution that get's a lot of use for a lot of people as the use potential for this is huge.

Update: Solution works in fiddle...

Yes, I had a comment party below.

But, it looks like I may have solved it. http://jsfiddle.net/pcarguy/Pd4rv/

The full code is:

// invoke the carousel
$('#myCarousel').carousel({
interval: false
});

var url = document.location.toString();
if (url.match('#')) {
// Clear active item
$('.carousel-inner div').removeClass('active');

// Activate item number #hash
var index = url.split('#')[1];
$('.carousel-inner div:nth-child(' + index + ')').addClass('active');
}

$('#myCarousel').bind('slid', function (e) {
// Update location based on slide (index is 0-based)
var item = $('#myCarousel .carousel-inner .item.active');
window.location.hash = "#"+parseInt(item.index()+1);
})

$(window).bind( 'hashchange', function(e) {
var item = $('#myCarousel .carousel-inner .item.active');
window.location.hash = "#"+parseInt(item.index()+1);
 })

Update: Doesn't work

Still waiting on an answer I guess!

Found a potentially good resource - it's for BS tabs and not BS carousel, but it accomplishes this for tabs gist.github.com/badsyntax/2875426 — Lawrence Black
Noticed that both the google developer page I referenced and the link in the comment above use: $(window).bind( 'hashchange', function(e) { — Lawrence Black
Here is another solution for Tabs - but not carousel jqueryfordesigners.com/enabling-the-back-button — Lawrence Black
This solution worked pretty well for me (stackoverflow.com/a/21113070/2422275) — Andres F Garcia

Antonio Antonio · Accepted Answer · 2016-11-18T10:43:00

This below works on Bootstrap 3. Note that my version of code is just slightly different (because of my needs), so I did not test this one below, but it really should work.

function hadleHashNav() {
   var hash = window.location.hash;
   var hashIndetifier = "#carousel-slide-"; /* Check link has specific hash   */
   if (hash.indexOf(hashIndetifier) !== -1) {
       var slideIndex = hash.match(/\d+$/); /* Extract slide number at the end of url */
       $("#carousel").carousel(parseInt(slideIndex)); /* Navigate to slide */
   }
}

$(window).on('hashchange', function() {
    hadleHashNav();
});

$("#carousel").on("slid.bs.carousel", function (e) {
    setTimeout(function(){ /* Set timeout to prevent setting hash before slide animation completed */
        window.location.hash = "#carousel-slide-"+ parseInt($('.carousel   .carousel-inner .item.active').index());     /* Update hash based on slide (index is 0-based) */
    },300);
});

$(document).ready(function(){
    hadleHashNav(); /* Set slide initially */
});

Update Bootstrap Carousel based on window.location.hash

1 Answers