【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




ソースコード全文

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

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





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


下記ではSwiperスライダーの様々なカスタマイズ方法を記しているのでぜひ覗いてみてください!
Swiperスライダーのデモ16選

You can subscribe by SNS

スポンサーリンク

人気記事

*