swiper.jsで自動再生しながらループするサムネイル付きスライダーを実装した時の備忘録

Swiper.js

version

7.2.0 ~ 7.3.1

installation

以下の3択。

• npm
• CDN
• assetsをDLする

7系にアップデートされた際、.swiper-containerが.swiperに代わり、CDN派一同騒然という事態が発生した事例があるので、CDNは要注意。

自動再生しながらループするサムネイル付きスライダー

swiper.jsのサムネイル付きのループするスライドのdemoでは、サムネイルもhtmlで記述している。
でもサムネイルまで記述するのがめんどくさいし、スライドを変更することになった時に両方いじらないといけなくなる。
なので、メインスライドのスライドを複製する。

Swiper.jsのdemo

Demo

See the Pen Untitled by brassyk (@brassyk) on CodePen.

index.html

<!-- メインスライド -->
<div style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff;" class="swiper mySwiper2">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <img src="https://swiperjs.com/demos/images/nature-1.jpg" />
        </div>
        <div class="swiper-slide">
            <img src="https://swiperjs.com/demos/images/nature-2.jpg" />
        </div>
        <div class="swiper-slide">
            <img src="https://swiperjs.com/demos/images/nature-3.jpg" />
        </div>
    </div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
</div>
<!-- サムネイル -->
<div thumbsSlider="" class="swiper mySwiper">
    <!-- .mySwiper2の.swiper-wrapperをcloneNodeしてここにappendChildする -->
</div>

サムネイルのスライドを生成する

メインスライドのwrapperごと複製し、サムネイルのコンテナ内へ追加する。

メインスライドのスライドを複製する

cloneNodeでwrapperごと複製する。このとき、deepをtrueにしていることを確認。
falseになっていると、小ノードが複製されない。
DOM4ではdefaultがtrueで省略可能だったが、現在は必須なので要注意。

サムネイルのコンテナへ追加

cloneNodeで複製したノードは、メソッドで追加するまで親ノードを持てずドキュメントの一部にもなれない。
.mySwierへ、appendChildで追加する。

swiper-config.js

const mySwiper2_wrapper = document.querySelector(".mySwiper2 .swiper-wrapper"),
      mySwiper_container = document.querySelector(".mySwiper"),
      clone = mySwiper2_wrapper.cloneNode(true);
mySwiper_container.appendChild(clone);

Paramaterを設定する

スライドのサイズはいつもCSSで指定しているので、slidesPerViewはauto。
slidesPerView: "auto"のとき、loopedSlidesを設定する必要がある。
さらに、サムネイルは1列で表示させたい。
しかし、スライドの数が増減したときにいちいち変えるのはめんどくさい。
今回はメインスライドを複製するためにwrapperを取得しているので、childNodes.lengthで子ノードの数を取得する。
あとは適当にいい感じにする。

swiper-config.js

    const swiper = new Swiper(".mySwiper", {
    loop: false,
    spaceBetween: 10,
    slidesPerView: mySwiper2_wrapper.childNodes.length,
    freeMode: true,
    watchSlidesProgress: true
    });
    const swiper2 = new Swiper(".mySwiper2", {
    autoplay: {
        delay: 5000,
        disableOnInteraction: false
    },
    slidesPerView: "auto",
    centeredSlides: true,
    loop: true,
    loopedSlides: mySwiper2_wrapper.childNodes.length,
    spaceBetween: 10,
    speed: 800,
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev"
    },
    thumbs: {
        swiper: swiper
    }
    });
},false);

ついでに

IntersectionObserverでビューポートを監視し、
ビューポートにスライドが交差してからautoplay.start()させてみる。(ちょっと適当)

swiper-config.js

on: {
    afterInit: (mySwiper2) => {
        mySwiper2.autoplay.stop();
        const options = {
            root:       null,
            rootMargin: '-50%',
            thredhold:  0
        };
        const target = document.querySelector('.mySwiper2');
        const observer = new IntersectionObserver(callback, options);
        observer.observe(target);
        function callback(entries, object) {
            entries.forEach(function(entry, i) {
                if (!entry.isIntersecting) return;
                const target = entry.target;
                mySwiper2.autoplay.start();
                object.unobserve(target);
            });
        };
    },
}