3

フレックススライダーを利用したウェブサイトを構築していますが、URLハッシュナビゲーションを実装したいと思います。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のstartプロパティに配置してみました。

$('.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の経験はありますか？

4

2 に答える 2

8

私は同じ答えを探していて、それを理解したので、ここではあなたや他の誰かがそれを必要とする場合に備えています。数値だけを話している限り、それは非常に簡単です。

$(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-26T00:49:25.833 に答える
0

URLのアンカー部分（ハッシュ）を使用してFlexSliderのスライドにジャンプする解決策を探しているときに、この質問に出くわしました。ただし、Andrewの答えは私にはうまくいきませんでした。おそらく、これを書いている時点で、FlexSliderはバージョン2.6.4であり、jQueryバージョン1.7.0以降が必要です。

私のソリューションは、URLから番号を取得するために、Andrewの回答の最初の部分を借用し、残りの部分にはFlexSlider2.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-25T10:20:34.847 に答える