Slide Proのスライダーが2枚の場合の不具合をスマートフォンにも対応

今回はSlide Proのスライダーが2枚の時、右フリックの挙動に不具合がでていたので
下記記事を参考にさせていただき修正したのですが、
スマートフォンに対応させるためレスポンシブ対応などでブレイクポイントを設定していた場合、
修正が反映されていなかったので追加で修正をしました。

※Slide Proのスライダーが2枚の場合についての不具合の対応は
下記記事を参考に修正してください。

Slider Pro カスタマイズ：スライダーが2枚の時に対応


【1】jquery.sliderPro.jsの4598行目のコードを変更する

jquery.sliderPro.jsを開き4598行目に書かれている下記コードを修正します。

【修正前】4598行～4605行

// Re-create the buttons. This is calles when the number of slides changes.
_adjustButtons: function() {
 this.$buttons.empty();

// Create the buttons
for ( var i = 0; i < this.getTotalSlides(); i++ ) {
 $( '<div class="sp-button"></div>' ).appendTo( this.$buttons );
}

【修正後】修正前のコードを下記に変更します

// Re-create the buttons. This is calles when the number of slides changes.
_adjustButtons: function() {
 var that = this;
 var dummyButtons = this.$slides.find('div.sp-slide:not(.dSlide)').length;
 var eventIndex;
 this.$buttons.empty();

// Create the buttons
for ( var i = 0; i < dummyButtons; i++ ) {
 $( '<div class="sp-button"></div>' ).appendTo( this.$buttons );
}

【修正前】4598行～4605行のコードを全て【修正後】コードに変更すれば
ブレイクポイントを使ったレスポンシブデザインにも対応することができました。

もしスマホとかで表示した時、スライダーが4枚に複製されたままになっている場合はお試しください。





ブログ王ランキングに参加中！