「Slider Pro」で2枚時と1枚時のスライダーの対応

2枚の時の対処方法

「sliderpro」のコードのsp-slidesのところにオリジナルのクラス「my_slides（任意で変えてください）」を振ります。

<div id="my_slider" class="slider-pro">
<div class="sp-slides my_slides">
<div class="sp-slide"><img src="" /></div>
<div class="sp-slide"><img src="" /></div>
</div><!-- js_slides -->
</div><!-- js_slider -->

以下のjsコードを、記述します。

jQuery( document ).ready(function( $ ) {
$('.my_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%',
});
});

「jquery.sliderPro.js」を編集

「jquery.sliderPro.js」を編集をするので、
以下のURLからダウンロードします。
http://bqworks.com/slider-pro/

ダウンロードしたら変更を加えていきます。

150-151行目あたりにコードを追加

this.$slider.removeClass( 'sp-no-js' );というコードが151行目あたりにあるので前後どちらかに以下のコードを記述

/* 追加 */
var dummyButtons = this.$slider.find('div.sp-slide:not(.dSlide)').length;

4568-4596行目を修正

「// Create the buttons」で検索かけると早い

// 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' );
},

以下のサイトのを参考にしました。
2016年の記事でしたが、うまくいったので問題はないと思います。

▼Slider Pro カスタマイズ：スライダーが2枚の時に対応
http://homemadegarbage.0t0.jp/slider-pro-customize

1枚の時の対処方法

slider-proの設定「touchSwipe（フリックできるようになるやつ）」がtrueになってて1枚しかスライド画像がないと左右に動いたときに使ったコード。
画像枚数取得して、1枚の時は条件分岐

var sliderImg = $('#my_slider .sp-slide').length;
if(sliderImg > 1){
//　1枚以上の時
$( '#my_slider' ).sliderPro({
visibleSize: '100%',
});
}else{
//　1枚しか無い時
}