使用Flexslider哈希URL導航

我正在構建一個使用flexslider的網站，但我想實現一些URL哈希導航。基於URL的散列，我計劃獲取我想要顯示的幻燈片的索引，而最接近的是通過查看手動導航的代碼，其中單擊元素的索引等於索引幻燈：使用Flexslider哈希URL導航

slider.controlNav.live(eventType, function(event) { 
    event.preventDefault(); 
    var $this = $(this), 
    target = slider.controlNav.index($this); 

    if (!$this.hasClass(namespace + 'active')) { 
     (target > slider.currentSlide) ? slider.direction = "next" : slider.direction = "prev"; 
     slider.flexAnimate(target, vars.pauseOnAction); 
    } 
});

所以，我想調整的原則，並把它在Flexslider的起始屬性：

$('.flexslider').flexslider({ 
    start: function(slider) { 
     var target = 2; // Set to test integer 

      (target > slider.currentSlide) ? slider.direction = "next" : slider.direction = "prev"; 
      slider.flexAnimate(target); 
    } 
});

獲取基於URL的哈希值對應的整數不應該是一個問題，但我似乎無法得到我需要的測試整數的幻燈片。

有沒有人有任何URL哈希和Flexslider的經驗？

來源

2012-07-08 Joey

我正在尋找相同的答案，並找出答案，所以在這裏，以防萬一你或其他人需要它。只要我們只是在談論數字的價值，這很簡單。

$(window).load(function(){ 

    //set some variables for calculating the hash 

    var index = 0, hash = window.location.hash; 

    //via malsup (Cycle plugin), calculates the hash value 

    if (hash) { 
     index = /\d+/.exec(hash)[0]; 
     index = (parseInt(index) || 1) - 1; 
    } 

    $(".flexslider").flexslider({ 
     startAt: index, //now foo.html#3 will load item 3 
     after:function(slider){ 
      window.location.hash = slider.currentSlide+1; 
      //now when you navigate, your location updates in the URL 
     } 
    }) 
})

這應該做的伎倆

來源

2012-08-26 00:49:25 Andrew

這太好了。如果有的話，在您的JS中，您可以將字符串分配給數組中的所述數字，以便能夠檢索給定字符串的索引。感謝你的回答！ – Joey 2012-08-26 18:40:33

尋找一個解決方案跳轉到使用URL的錨部分（散）在FlexSlider幻燈片，當我遇到這個問題就來了。然而，安德魯的答案對我來說並不奏效，可能是因爲在撰寫本文時，FlexSlider現在是2.6.4版本，並且需要jQuery版本1.7.0+。

我的解決辦法借用安德魯的回答的第一部分，用於獲取數出來的URL，然後使用內置的輔助繩從FlexSlider 2.6.4爲休息：

$(window).on('load', function() { 

    // Get number from hash part of URL 
    var index = 0, hash = window.location.hash; 
    if (hash) { 
    index = /\d+/.exec(hash)[0]; 
    index = (parseInt(index) || 1) - 1; 
    } 

    // Initialise a basic FlexSlider 
    $('.flexslider').flexslider({ 
    animation: "slide" 
    }); 

    // Pass index into helper string to jump to specific slide 
    $('.flexslider').flexslider(index); 
}

希望這幫助任何在FlexSlider更高版本上尋找解決方案的人:)

來源

2017-09-25 10:20:34 jamesMcMeex

使用Flexslider哈希URL導航

回答

相關問題