URLハッシュに基づいてbxSliderを開始します。

Question

私のbXsliderスライドを、ロード時のURLのハッシュに基づいて変更します。 私のURLがwww.website.com/#slide1の場合、最初のスライドが表示され、私のURLがwww.website.com/#slide2なら2番目のスライドが表示されます。ハッシュは、＃のslide1または＃slide2あるときにのみ動作し、

if(typeof $.fn.bxSlider !== "undefined"){ 
      var mainSlider = $('#homepage .bxslider').bxSlider({ 
       mode:'fade', 
       pager: true, 
      }); 
      if(location.hash === "#slide1") { 
       mainSlider.goToSlide(1); 
      } else if(location.hash === "#slide2"){ 
       mainSlider.goToSlide(2); 
      } else if(location.hash === "#slide3"){ 
       mainSlider.goToSlide(3); 
      } else if(location.hash === "#slide4"){ 
       mainSlider.goToSlide(4); 
      } else if(location.hash === "#slide5"){ 
       mainSlider.goToSlide(5); 
      } else if(location.hash === "#slide6"){ 
       mainSlider.goToSlide(6); 
      } else if(location.hash === "#slide7"){ 
       mainSlider.goToSlide(7); 
      } else if(location.hash === "#slide8"){ 
       mainSlider.goToSlide(8); 
      } else if(location.hash === "#slide9"){ 
       mainSlider.goToSlide(9); 
      } else if(location.hash === "#slide10"){ 
       mainSlider.goToSlide(10); 
      } else if(location.hash === "#slide11"){ 
       mainSlider.goToSlide(11); 
      } else if(location.hash === "#slide12"){ 
       mainSlider.goToSlide(12); 
      } else if(location.hash === "#slide13"){ 
       mainSlider.goToSlide(13); 
      } else if(location.hash === "#slide14"){ 
       mainSlider.goToSlide(14); 
      } 
     } 

問題がある：

は、私はそれが、このjQueryのコードを使用して動作させることができました。私のコードに何か問題がありますか？これを行う短い方法はありますか？

はまた、私はすべての私の.bx-ページャ-item要素に異なるIDを追加するには、以下のコードを使用：

$('#pagination .bx-pager-item').each(function(i) { 
    $(this).attr('id', 'slide'+(i+1)); 
}); 

私はそのようにHREFの最後にハッシュとしてIDを追加するにはどうすればよいですidのslide1を持つ最初の.bx-pager-item要素をクリックすると、URLの最後に＃slide1のハッシュを持つ別のページに移動しますか？

Answer 1

問題は、ハッシュ＃1と＃2だけが問題です。 私のコードに何か問題がありますか？これを行う短い方法はありますか？

The documentationあなたはスライダーをインスタンス化するときにstartSlideオプションを渡すことができますと言います。したがって、コードは次のようになります。

if (typeof $.fn.bxSlider !== "undefined") { 

    // Check if '#slide' is present in the hash. 
    // Replace it with an empty string so we have whatever comes after left. 
    // Convert that to an integer for the startSlide option 

    var slideId = (location.hash.indexOf('#slide') > -1) ? parseInt(location.hash.replace('#slide', ''), 10) : null; 

    if (slideId) { 

    $('#homepage .bxslider').bxSlider({ 
     mode:'fade', 
     pager: true, 
     startSlide: slideId - 1, 
    }); 

    } 

} 

完全に防弾ではありません。 #slide10abcに誰かが成功しないようにチェックを追加することができます。 parseIntは、その場合には、適切なインデックスにあなたの方法をスローしません:)

をあなたが最初.bx-ページャ項目をクリックしたとき ように、私はHREFの最後にハッシュとしてIDを追加するにはどうすればよいです要素idがslide1の場合 URLの末尾に＃slide1のハッシュが付いた別のページに移動しますか？

$('#pagination .bx-pager-item').each(function(i) { 
    var $this = $(this); 
    var currentHref = $this.attr('href'); 
    var newHref = currentHref + '/#slide' + (i+1); 
    $this.attr('href', newHref); 
}); 

再び：私は私が正しくあなたを理解すればかなりわからないんだけど、私はあなたがオーバーループしているHTMLに応じて、このような何かを行うことができると思う

新しいhrefとして設定したものが実際に有効な/適切なURLであることを確認するためにいくつかのチェックを行うことができます。例えば。現在のhrefの最後に '/'がないかチェックして、それを2回追加しないようにします。

あなたの目標に近づけば幸いです。コメントで詳細な説明を求めてください。コメントする

---

回答：コールバックのコードの2枚

If you want to manipulate the slides after bxSlider is loaded, you could use the ```onSliderLoad``` callback, which is passed to the options object for the slider. It would look something like this: 

if (typeof $.fn.bxSlider !== "undefined") { 

    var slideId = (location.hash.indexOf('#slide') > -1) ? parseInt(location.hash.replace('#slide', ''), 10) : null; 

    if (slideId) { 

    $('#homepage .bxslider').bxSlider({ 
     mode:'fade', 
     pager: true, 
     startSlide: slideId - 1, 
     onSliderLoad: function() { 
     $('#pagination .bx-pager-item').each(function(i) { 
      var $this = $(this); 
      var currentHref = $this.attr('href'); 
      var newHref = currentHref + '/#slide' + (i+1); 
      $this.attr('href', newHref); 
     }); 
     } 
    }); 

    } 

}