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

基于window.location.hash更新Bootstrap Carousel

1 个答案: