【Swiper】自動で流れ続ける無限ループスライダーを作成する

infinite loop slider

当記事ではswiper.jsを使用して、自動で流れ続ける無限ループスライダーを作成する方法について記します。


通常のSwiper.jsでのスライダーの作成はご存じの前提で進めさせていただきますので、Swiper.jsを初めて使う方はこちらから先に参考いただければと思います。
Swiper.jsでスライダーを実装する



①矢印とドットのないスライダーを作成する

自動で流れ続けるスライダーなので、矢印とドットはいりません。
loopオプションをtrueにしておきます。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

<style>
    .sample-slider{
        width:70%;
    }
    .sample-slider img{
        width: 100%;
    }
</style>

<div class="swiper sample-slider">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="./img/sample1.png"></div>
        <div class="swiper-slide"><img src="./img/sample2.png"></div>
        <div class="swiper-slide"><img src="./img/sample3.png"></div>
        <div class="swiper-slide"><img src="./img/sample4.png"></div>
    </div>
</div>

<script>
    const swiper = new Swiper('.sample-slider', {
        loop: true,        
    })
</script>

矢印とドットのないスライダーができました。
スワイプでスライドを動かせると思います。

slide_image1
slide_image2
slide_image3
slide_image4




②スライドを自動再生にする

autoplayオプションでスライドを自動再生にします。止まる事なく動かしたいので、delayを0にします。

const swiper = new Swiper('.sample-slider', {
    loop: true,
    autoplay: {     //追記
        delay: 0,   //追記
    },              //追記
})

自動再生のスライダーができました。

slide_image1
slide_image2
slide_image3
slide_image4




③スライドスピードと表示枚数を設定する

speedオプションでスライドスピードを、slidesPerViewオプションで表示枚数を設定します。

const swiper = new Swiper('.sample-slider', {
    loop: true,
    autoplay: {
        delay: 0,
    },
    speed: 3000,          //追記
    slidesPerView: 3,     //追記
})
slide_image1
slide_image2
slide_image3
slide_image4




④スライドの動きをスムーズにする

CSSに下記のように追記してスライドの動きをスムーズにします。

.sample-slider .swiper-wrapper{
    transition-timing-function: linear;
}

自動で流れ続ける無限ループスライダーができました!

slide_image1
slide_image2
slide_image3
slide_image4




⑤ホバー時に自動再生を停止する

サイトの閲覧者の中にはもしかしたら、自動再生を止めて特定のスライドに集中したい人もいるかもしれません。
そんな方のために無限ループスライダーをより改善しましょう。

pauseOnMouseEnter:trueを追加することで、ホバー時に自動再生を止められます。
disableOnInteraction:falseを追加する事で、ホバーを外したときに自動再生を再開できます。

const swiper = new Swiper('.sample-slider', {
    loop: true,
    autoplay: {
        delay: 0,
        pauseOnMouseEnter: true,        // 追記
        disableOnInteraction: false,    // 追記
    },
    speed: 3000,
    slidesPerView: 3,
})


ホバー時に自動再生が停止し、ホバーが解除されると再開します。
即座に停止するのではなく、スライドの切り替えが終了した時点で停止します。

slide_image1
slide_image2
slide_image3
slide_image4





⑥自動再生の方向を逆向きにする

autoplaオプションの中にreverseDirection: trueを追加することで、自動再生を逆向きにすることができます。

const swiper = new Swiper('.sample-slider', {
    loop: true,
    autoplay: {
        delay: 0,
        pauseOnMouseEnter: true,
        disableOnInteraction: false,
        reverseDirection: true,         // 追加
    },
    speed: 3000,
    slidesPerView: 3,
})


自動再生が逆向きになりました。

slide_image1
slide_image2
slide_image3
slide_image4






ループが動かない件について

私たちはWeb開発者の何人かがloopが動かない件について話していることに気が付きました。
原因と解決策を調査して別の記事にまとめたので、ループがうまく動かなかったり途中で止まる場合はこちらをご参照ください。

Swiper9と10でloop×slidesPerViewが動かない件






ソースコード全文

最後にソースコードを全文載せておきます。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

<style>
    .sample-slider{
        width:70%;
    }
    .sample-slider img{
        width: 100%;
    }
    .sample-slider .swiper-wrapper{
        transition-timing-function: linear;
    }
</style>


<div class="swiper sample-slider">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="./img/sample1.png"></div>
        <div class="swiper-slide"><img src="./img/sample2.png"></div>
        <div class="swiper-slide"><img src="./img/sample3.png"></div>
        <div class="swiper-slide"><img src="./img/sample4.png"></div>
    </div>
</div>


<script>
    const swiper = new Swiper('.sample-slider', {
        loop: true,
        speed: 2000,
        slidesPerView: 3,      
        autoplay: {
            delay: 0,
            pauseOnMouseEnter: true,        // ホバーした時に自動再生を停止する
            disableOnInteraction: false,    // ホバー外した時に自動再生を再開する
            reverseDirection: true,         // 自動再生を逆向きにする
        },
    })
</script>





以上、swiper.jsを使用して自動で流れ続ける無限ループスライダーを作成する方法でした。


スポンサーリンク

You can subscribe by SNS

スポンサーリンク

コメントを残す

*