・Swiperで無限ループするスライダーって作れる？
こんな疑問にお答えします。
案件によっては、自動で動く無限ループスライダーを作る時ありますよね。
それ実はSwiperで簡単に実装可能です。
すぐにできるよ！
ということで、この記事では「Swiperで自動再生の無限ループスライダーを作成」について解説していきます！
swiper自体の作り方については下記記事を参考に↓
【簡単】Swiperの使い方｜初心者向けに解説【オプション】 ・Swiperで自動再生の無限ループスライダーを作成
・Swiperで自動再生の無限ループスライダーを作成【逆向き】
目次
【簡単】Swiperで自動再生の無限ループスライダーを作成【サンプルあり】
そんな自動再生で動く無限ループスライダーのサンプルがこちら↓
See the Pen swiper 無限ループ by jito-coder (@jito-coder) on CodePen.
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide swiper-slide01">
<img src="https://jito-site.com/wp-content/uploads/2023/01/1.png" alt="">
</div>
<div class="swiper-slide swiper-slide02">
<img src="https://jito-site.com/wp-content/uploads/2023/01/2.png" alt="">
</div>
<div class="swiper-slide swiper-slide03">
<img src="https://jito-site.com/wp-content/uploads/2023/01/3.png" alt="">
</div>
<div class="swiper-slide swiper-slide04">
<img src="https://jito-site.com/wp-content/uploads/2023/01/4.png" alt="">
</div>
</div>
</div>.swiper-wrapper{
transition-timing-function: linear;
}window.onload = function() {
const swiper = new Swiper(".swiper", {
loop: true,
autoplay: {
delay: 0,
pauseOnMouseEnter: true,
disableOnInteraction: false,
},
speed: 2000,
slidesPerView: 2,
});
}コードの中で重要な点がこちら↓
- 通常通りのスライダーを実装
- 遷移の遅延が０秒の自動再生を有効に
- 仕様に合わせてスライド数とスピードを指定
- スライドの動きをスムーズにさせる
- ホバー時に止めるかの指定
順に解説してきます。
まず通常通りのスライダーを実装するHTMLを組み立てます。
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide swiper-slide01">
<img src="https://jito-site.com/wp-content/uploads/2023/01/1.png" alt="">
</div>
<div class="swiper-slide swiper-slide02">
<img src="https://jito-site.com/wp-content/uploads/2023/01/2.png" alt="">
</div>
<div class="swiper-slide swiper-slide03">
<img src="https://jito-site.com/wp-content/uploads/2023/01/3.png" alt="">
</div>
<div class="swiper-slide swiper-slide04">
<img src="https://jito-site.com/wp-content/uploads/2023/01/4.png" alt="">
</div>
</div>
</div>矢印とドットは使わないため、今回はHTMLに記述しておりません。
続いてJavaScriptにて、自動再生を有効にしたコードを記述します。
無限ループにしたいので、切替時の遷移遅延は０秒に指定。
window.onload = function() {
const swiper = new Swiper(".swiper", {
loop: true,
autoplay: {
delay: 0,
},
});
}
次に表示するスライド枚数と、スピードを指定します。
今回は例として２枚表示の２秒で切替わるように指定しました。
window.onload = function() {
const swiper = new Swiper(".swiper", {
loop: true,
autoplay: {
delay: 0,
},
speed: 2000,
slidesPerView: 2,
});
}
ただこのままだと、動きがくねくねしちゃいます。。
先述のままだとスライドの動きがくねくねするので、CSSを使って対策します。
それが下記コード↓
.swiper-wrapper{
transition-timing-function: linear;
}
これでスムーズな動きの自動再生無限ループスライダーが完成しました！
これは仕様によりますが、ホバー時にスライドを止めるか否かの指定をします。
止める場合、下記の6,7行目コードを追加。
window.onload = function() {
const swiper = new Swiper(".swiper", {
loop: true,
autoplay: {
delay: 0,
pauseOnMouseEnter: true,
disableOnInteraction: false,
},
speed: 2000,
slidesPerView: 2,
});
}これで無限ループスライダーの実装ができました！
See the Pen swiper 無限ループ by jito-coder (@jito-coder) on CodePen.
【簡単】Swiperで自動再生の無限ループスライダーを作成【逆向き】
最後に逆向きに動く、無限ループスライダーを紹介します。
それがこちら↓
See the Pen swiper 無限ループ逆向き by jito-coder (@jito-coder) on CodePen.
先ほどとは反対の方向に動いていきますよね。
とはいってもやり方は簡単。
「autoplay」にて、下記コードを追加すればOKです。
autoplay: {
delay: 0,
pauseOnMouseEnter: true,
disableOnInteraction: false,
// 下記を追加
reverseDirection: true,
}, 全体コードがこちら↓
window.onload = function() {
const swiper = new Swiper(".swiper", {
loop: true,
autoplay: {
delay: 0,
pauseOnMouseEnter: true,
disableOnInteraction: false,
reverseDirection: true,
},
speed: 2000,
slidesPerView: 2,
});
}これだけで逆方向の動きの指定ができます！
【簡単】Swiperで自動再生の無限ループスライダーを作成【サンプルあり】：まとめ
- 「autoplay」を有効＋遅延０秒
- CSSを使い動きをスムーズに
- 逆方向にする場合「autoplay」に「reverseDirection: true,」を追加
Swiperで自動再生の無限ループスライダーを作る時はためしてみてね！
