スライドが1つしかない場合は、スワイパースライダーを無効にします



Disable Swiper Slider If Only 1 Slide



解決:

Swiper APIには、役立つ可能性のあるオプションがあります。

watchOverflow(boolean | false)//有効にすると、スワイパーが無効になり、スライドするのに十分なスライドがない場合はナビゲーションボタンが非表示になります 

私もそうする方法を探していましたが、スワイプを無効にしてポケットベルを非表示にする公式の方法が見つからなかったので、少し即興で演奏することにしました。



したがって、スクリプトでは、Swiper変数の後にこれを追加できます。

JS:



if($( '。slider.slide')。length == 1){$( '。swiper-wrapper')。addClass( 'disabled'); $( '。swiper-pagination')。addClass( 'disabled'); }

これにより、クラスが追加されますスライダーにスライドが1つしかない場合は、ラッパーとページ付けに対して無効になります。これで、CSSを追加してSwipereffextsをバイパスできます。

CSS:

.swiper-wrapper.disabled {変換:translate3d(0px、0、0)!important; } .swiper-pagination.disabled {表示:なし; }

これは、ループがfalseに設定されている場合にのみ機能することに注意してください(あなたの場合のように)。ループがアクティブな場合、Swiperは唯一のスライドの前後にスライドの複製を追加し、合計3つの同一のスライドを作成します。その後、変更することができます長さ== 1から長さ== 3。



これがお役に立てば幸いです。


オプションの1つは、以下のように、条件付きでオプションを追加することです。

オプション= {}; if($( '。swiper-container.swiper-slide')。length == 1){options = {direction: 'horizo​​ntal'、loop:false、autoplayDisableOnInteraction:false、keyboardControl:true、mousewheelControl:true、pagination: ' .swiper-pagination '、paginationClickable:true、}} else {options = {loop:false、autoplay:false、}} var swiper = new Swiper('。swiper-container '、options);