Hatena 
スライダーを作成するライブラリは沢山ありますが、その中の一つである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>現時点（2022年9月時点）で最新のCDNを使用しています。
CDNの最新バージョンはこちらの公式サイトでご確認いただけます。
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 class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>一番親要素のsample-sliderクラス以外はクラス名を合わせておかないと、動かなかったり、スタイルが崩れたりするので要注意です。
③Javascriptでスライダーにする
1行目の.sample-sliderの部分はHTMLで記述したスライダーパーツの一番親のクラスを指定します。
2行目以降は任意に指定できるオプションになります。
const swiper = new Swiper('.sample-slider', {
loop: true, //ループ
autoplay: { //自動再生
delay: 2000,
},
pagination: { //ページネーション（ドット）
el: '.swiper-pagination',
},
navigation: { //ナビゲーション（矢印）
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
})スライダーになりました。後はスタイル調整のみです。
④CSSでスタイルを整える
CSSでスライダーの横幅を調整します。
横幅をパーセントで指定することでレスポンシブなスライダーができます。
.sample-slider{
width:70%;
}
.sample-slider img{
width: 100%;
}シンプルなレスポンシブスライダーが完成しました！
ソースコード全文
最後にソースコード全文を載せておきます。
<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-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<script>
const swiper = new Swiper('.sample-slider', {
loop: true, //ループ
autoplay: { //自動再生
delay: 2000,
},
pagination: { //ページネーション（ドット）
el: '.swiper-pagination',
},
navigation: { //ナビゲーション（矢印）
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
})
</script>
以上、Swiper.jsでスライダーを実装する方法でした。
Swiperスライダーについてもっと学びたい方は下記の記事など参考にしてみてください。
Swiperスライダーの矢印をカスタマイズする方法
Swiperスライダーのページネーションをカスタマイズする
また、swiper.jsでどのようなスライダーが作れるか興味ある方は下記も覗いてみてください。
Swiperスライダーのデモ16選
コメント