Slider Pro カスタマイズ：スライダーが2枚の時に対応
お母ちゃん
2016.12.1
0
0
Slide Proで、スライダーが2枚の時に上手く動かなかったので、調整しました。
目次
通常、2枚の時
ノーマルスライダー
一瞬消える
100%のスライダー
左側が空白になる
カスタマイズ Demo
ノーマルスライダー
スムーズにスライド
100%のスライダー
左側にも表示
コード
HTML
|
1 2 3 4 5 6 |
<div id="my-slider-customize" class="slider-pro"> <div class="sp-slides customize-slides"> <div class="sp-slide"><img class="sp-image" src="/wp/wp-content/uploads/2016/10/icon-280x300.jpg" /></div> <div class="sp-slide"><img class="sp-image" src="/wp/wp-content/uploads/2016/07/IMAG0162-300x170.jpg" /></div> </div> </div> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script type="text/javascript"> jQuery( document ).ready(function( $ ) { $('.customize-slides').each(function(i) { if( $(this).find('div.sp-slide').length == 2 ){ var spSlide = $(this).html().replace(/sp-slide/g,'sp-slide dSlide'); $(this).append(spSlide); } }); $( '#my-slider' ).sliderPro({ visibleSize: '100%', }); }); |
2枚の時に複製して、4枚にします。
jquery.sliderPro.js
これだけだと、スライダーに対応したボタンも4つになってしまうので、jquery.sliderPro.jsも修正しました。
「dummyButtons」という変数で差し込んでいます。
150-151行目
|
1 2 |
/* Customize */ var dummyButtons = this.$slider.find('div.sp-slide:not(.dSlide)').length; |
4517-4551 行目
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
// Create the buttons _createButtons: function() { var that = this; var dummyButtons = this.$slides.find('div.sp-slide:not(.dSlide)').length; var eventIndex; // Create the buttons' container this.$buttons = $( '<div class="sp-buttons"></div>' ).appendTo( this.$slider ); // Create the buttons for ( var i = 0; i < dummyButtons; i++ ) { $( '<div class="sp-button"></div>' ).appendTo( this.$buttons ); } // Listen for button clicks this.$buttons.on( 'click.' + NS, '.sp-button', function() { var index = $( this ).index(); var dummyIndex = ( eventIndex >= dummyButtons )? index + dummyButtons : index; that.gotoSlide( dummyIndex ); }); // Set the initially selected button this.$buttons.find( '.sp-button' ).eq( this.selectedSlideIndex ).addClass( 'sp-selected-button' ); // Select the corresponding button when the slide changes this.on( 'gotoSlide.' + NS, function( event ) { that.$buttons.find( '.sp-selected-button' ).removeClass( 'sp-selected-button' ); eventIndex = event.index; var dummyIndex = ( event.index >= dummyButtons )? event.index - dummyButtons : event.index; that.$buttons.find( '.sp-button' ).eq( dummyIndex ).addClass( 'sp-selected-button' ); }); // Indicate that the slider has buttons this.$slider.addClass( 'sp-has-buttons' ); }, |
個人的メモ
サイト内で使う為のメモです。
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div id="my-slider" class="slider-pro wp"> <div class="sp-slides"> <div class="sp-slide"> <img class="sp-image" src="/wp/wp-content/uploads/2016/10/icon-280x300.jpg" /> <p class="sp-caption">caption 1</p> </div> <div class="sp-slide"> <img class="sp-image" src="/wp/wp-content/uploads/2016/07/IMAG0162-300x170.jpg" /> <p class="sp-caption">caption 2</p> </div> <div class="sp-slide"><img class="sp-image" src="/wp/wp-content/uploads/2016/10/IMAG0310-300x229.jpg" /></div> </div> </div> |
表示デモ
caption 1
caption 2
