swiperのスライドショーで1枚の時はスライドしないようにする方法

swiper実装時にスライドが1枚になった時を想定してJSを制御します。
最初は3枚だったけど、クライアント様の状況で1枚になったりすることってまああること。

ただ、loop設定していると無駄に1枚の画像がスライドすることになります笑
ちょっとシュールですよね。
情報を伝えるということはできているので、気にしない方は気にしないかもしれませんが
根本1枚だったらスライドする必要も、ページネーションや矢印を表示する必要なくない？と思ってしまいます。

ということで今回は備忘録として、swiperのスライドショーで1枚の時はスライドしないようにする方法を残しておきます。
swiperの実装方法はここで省きますので、各自でしらべてみてください。

まずHTMLは下記のような感じ。
よくあるswiperの実装方法と同じです。

<section id="mainSlider">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <a href="URL">
                        <figure>
                            <img src="../images/test01.jpg" alt="">
                        </figure>
                    </a>
                </div>
            </div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>

            <!--<div class="swiper-pagination"></div>  今回ページネーションは不要だったのでコメントアウト。適宜変更を。-->
        </div>
    </section>

肝心のJSはこんな感じです。

$(function () {
  let options = {}; //オプションを指定するよ宣言
    
  if ( $("#mainSlider .swiper-container").length == 1 ) { //スライドが1枚以上だったら
        options = { //下記のオプションで動かしてね
            loop: true,
            effect: 'slide',
            slidesPerView: 1,
            speed: 2000,
            centeredSlides : true,
            autoplay: {
              delay: 4000,
              disableOnInteraction: false,
            },
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
            }
        }
    } else { //それ以外（つまり1枚だった）の場合
        options = {
            loop: false, //ループしない
            autoplay: false,　//オートプレイしない
        }
    }
  new Swiper('#mainSlider .swiper-container', swipeOption); //ここはデフォのswiper宣言
});

という感じになります。

さらにさらに
今回私の場合は、矢印を表示するようにしてました。
1枚のときはこの矢印もいらないので、下記のJSを追加します。
上記JSのオプションでいろいろできないか試したのですがうまくいかず…。
もっといい方法があれば教えてください。

$(function(){
    const slideLength = document.querySelectorAll('#mainSlider .swiper-container .swiper-slide').length

    if (slideLength == 1) { //スライドが1枚だった場合はslideNoneというクラスを付与する
    $("#mainSlider .swiper-container").addClass("slideNone");
    }
});

クラスを付与して、あとはCSSで調整します。ここは簡単ですね。

.slideNone .swiper-button-next,
.slideNone .swiper-button-prev {
    display: none;
}

以上です！なんだかもう少しよい方法があるような気がしてならないのですが（改善の余地あり…）
ひとまずはこれでやりたいことが叶うのでよしとしましょう！

それでは！

Share: