Hatena 
当記事では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>矢印とドットのないスライダーができました。
スワイプでスライドを動かせると思います。
②スライドを自動再生にする
autoplayオプションでスライドを自動再生にします。止まる事なく動かしたいので、delayを0にします。
const swiper = new Swiper('.sample-slider', {
loop: true,
autoplay: { //追記
delay: 0, //追記
}, //追記
})自動再生のスライダーができました。
③スライドスピードと表示枚数を設定する
speedオプションでスライドスピードを、slidesPerViewオプションで表示枚数を設定します。
const swiper = new Swiper('.sample-slider', {
loop: true,
autoplay: {
delay: 0,
},
speed: 3000, //追記
slidesPerView: 3, //追記
})④スライドの動きをスムーズにする
CSSに下記のように追記してスライドの動きをスムーズします。
.sample-slider .swiper-wrapper{
transition-timing-function: linear;
}自動で流れ続ける無限ループスライダーができました！
ソースコード全文
最後にソースコードを全文載せておきます。
<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選
