スライダーを作成するライブラリは沢山ありますが、その中の一つであるswiper.jsはjQueryを使わずに実装できるのが魅力のひとつです。
当記事ではswiper.jsを使用したスライダーの実装方法を記します。
目次
①必要なライブラリをCDNで読み込む
<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>最新はver11ですがver9から続くループ系のバグがまだ少し残っているので、ver8を使うことをお勧めします。
Swiper.jsの最新バージョンは常にこちらの公式サイトでご確認いただけます。
https://swiperjs.com/get-started#use-swiper-from-cdn
②HTMLで必要なパーツを用意する
<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>
</div>③Javascriptでスライダーにする
第一引数（.sample-sliderの部分）にはHTMLで記述したスライダーパーツの一番親のクラスを指定します。
const swiper = new Swiper('.sample-slider', {
})
スライダーになりました。スワイプするとスライドが動くと思います。
④CSSでスタイルを整える
CSSでスライダーの横幅を調整します。
横幅をパーセントで指定することでレスポンシブなスライダーができます。
.sample-slider{
width:70%;
}
.sample-slider img{
width: 100%;
}
シンプルなスライダーが完成しました！
⑤ナビゲーションを表示する
Swiper.jsでは左右の矢印をナビゲーションといいます。
<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>
<div class="swiper-button-prev"></div> <!-- 追記 -->
<div class="swiper-button-next"></div> <!-- 追記 -->
</div>const swiper = new Swiper('.sample-slider', {
navigation: { //追記
nextEl: ".swiper-button-next", //追記
prevEl: ".swiper-button-prev", //追記
}, //追記
})
ナビゲーション（矢印）が表示されました。
ナビゲーションをカスタマイズしたい場合はこちら
Swiperスライダーの矢印を任意の画像でカスタマイズする方法
Swiperスライダーの矢印のサイズや位置や色を変更する
⑥ページネーションを表示する
Swiper.jsでは現在のスライド位置を示すドットをページネーションといいます。
<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>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-pagination"></div> <!-- 追記 -->
</div>const swiper = new Swiper('.sample-slider', {
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
pagination: { //追記
el: '.swiper-pagination', //追記
}, //追記
})
ページネーション（ドット）が表示されました。
ページネーションをカスタマイズしたい場合はこちら
Swiperスライダーのページネーションを任意の画像でカスタマイズする
Swiperスライダーのページネーションのサイズや位置や色を変更する
⑦スライダーをループさせる
よく使われるオプションの一つとしてループオプションがあります。
有効化することで、最後のスライドの続きに最初のスライドが再び来るようになります。
loop: trueを追加します。
const swiper = new Swiper('.sample-slider', {
loop: true, //追記
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
pagination: {
el: '.swiper-pagination',
},
})
スライダーがループするようになりました。
⑧スライダーを自動再生にする
よく使われるオプションとしてもう一つ自動再生オプションがあります。
delayの数値で次のスライドに切り替わるまでの時間が決まります。
以下の場合は2秒ごとにスライドが自動で切り替わります。
const swiper = new Swiper('.sample-slider', {
loop: true,
autoplay: { //追記
delay: 2000, //追記
}, //追記
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
pagination: {
el: '.swiper-pagination',
},
})
スライダーが自動再生になりました。
ソースコード全文
最後にソースコード全文を載せておきます。
<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>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-pagination"></div>
</div>
<script>
const swiper = new Swiper('.sample-slider', {
loop: true, //ループ
autoplay: { //自動再生
delay: 2000,
},
navigation: { //ナビゲーション（矢印）
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
pagination: { //ページネーション（ドット）
el: '.swiper-pagination',
},
})
</script>
以上、Swiper.jsでシンプルなスライダーを実装する方法でした。
下記の記事ではオプションやカスタマイズ方法も含めて包括的に説明しているので、Swiper.jsについてもっと詳しく学びたい方はご参照ください！
Swiper.jsの使い方とカスタマイズ方法
コメント