根据 window.location.hash 更新 Bootstrap Carousel

Question

下面的代码根据轮播幻灯片更新散列 - 我希望根据散列更新幻灯片。这个问题很好地解释了它。

有一个很好的方法来更新 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);
});

来自：http://www.ozmonet.com/2013/01/08/tweaking-the-bootstrap-carousel/ 这是他的例子：http://www.ozmonet.com/photography/

但是

我想更新此代码以侦听哈希更改并更新轮播。

这是一个很好的参考：https://developers.google.com/tv/web/articles/location-hash-navigation#detect-loc-hash

这样做的目的是获取现有代码，并使其与浏览器的后退按钮一起使用。

您会注意到我链接到的演示 (http://www.ozmonet.com/photography/) 后退按钮更新了哈希值；但是，它只需要更新轮播。

这应该是一个可以被很多人大量使用的解决方案，因为它的使用潜力是巨大的。

更新：解决方案有效...

是的，我在下面有一个评论派对。

但是，看来我可能已经解决了。 http://jsfiddle.net/pcarguy/Pd4rv/

完整代码为：

// 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);
 })

更新：不起作用

我猜还在等待答案！

Answer 1

这在 Bootstrap 3 上有效。请注意，我的代码版本略有不同（因为我的需要），所以我没有在下面测试这个，但它确实应该可以工作。

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 */
});