基于window.location.hash更新Bootstrap Carousel

Question

下面的代码基于转盘幻灯片更新哈希-我希望基于哈希更新幻灯片。这个问题解释得很好。

有一种很好的方法可以更新窗口。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散列

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

你会注意到我链接到的演示（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 */
});