基于window.location.hash更新引导传送带

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

这下面的工作引导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 */ 
});