jQuery不要のスライダープラグイン「Swiper」の実装方法
2023.10.20 Posted by Coding_team
ウェブサイトで使えるスライダープラグインといえば、jQueryを使用するものが多いですが
スライダーを設置する際、jQueryのバージョンが古くて挙動が変とか、jQueryを使用していないサイトにおいては jQueryに依存しないスライダープラグイン「Swiper」という選択肢があります。
今回は「Swiper」の実装方法と、オプションの指定方法などをご紹介します。
実装方法
↓ Swiperを最低限実装したものがこちら。(スワイプで移動できます)
まず、Swiperの必要ファイルをHTMLで読み込みます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html lang="ja"> <head> ・・・ <!-- CSS --> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css"> </head> <body> ・・・ <!-- JS --> <script src="//cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script> </body> </html> |
上記ではCDNを使っていますが、Swiper公式のDownload assetsからCSSとJSファイルをダウンロードすることもできます。
次に、スライダー本体のHTMLを作成します。
|
1 2 3 4 5 6 7 8 |
<div class="swiper"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="img01.jpg"></div> <div class="swiper-slide"><img src="img02.jpg"></div> <div class="swiper-slide"><img src="img03.jpg"></div> <div class="swiper-slide"><img src="img04.jpg"></div> </div> </div> |
.swiper の中に .swiper-wrapper を作成し、その直下に .swiper-slide を並べましょう。
そして、Swiperを実行します。
|
1 2 3 |
<script> const swiper = new Swiper(".swiper", {}); </script> |
まとめるとこんな感じです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!DOCTYPE html> <html lang="ja"> <head> ・・・ <!-- CSS --> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css"> </head> <body> <!-- スライダー --> <div class="swiper"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="img01.jpg"></div> <div class="swiper-slide"><img src="img02.jpg"></div> <div class="swiper-slide"><img src="img03.jpg"></div> <div class="swiper-slide"><img src="img04.jpg"></div> </div> </div> <!-- JS --> <script src="//cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script> <script> const swiper = new Swiper(".swiper", {}); </script> </body> </html> |
オプションの指定方法
オプションを指定した例がこちらです。
まず、ドットとページャーについては、HTMLに記述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class="swiper"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="img01.jpg"></div> <div class="swiper-slide"><img src="img02.jpg"></div> <div class="swiper-slide"><img src="img03.jpg"></div> <div class="swiper-slide"><img src="img04.jpg"></div> </div> <!-- ドット --> <div class="swiper-pagination"></div> <!-- ページャー --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> |
そして、Swiperのオプションはこのように指定します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<script> const swiper = new Swiper(".swiper", { loop: true, //最後までいったら最初から デフォルトはfalse speed: 400, //アニメーションの速度 デフォルトは300 autoplay: { // 自動再生 delay: 3000, //自動再生のスピード disableOnInteraction: false, //矢印をクリックしても自動再生を止めないようにする }, //ドットを指定 pagination: { el: ".swiper-pagination", clickable: true //ドットのクリックを有効化 }, //ページャーを指定 navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev" }, //レスポンシブ breakpoints: { 768: { //768px以上なら次を適用 slidesPerView: 1.5, //左右のスライドチラ見せ centeredSlides: true, //左右のスライドチラ見せ } } }); </script> |
上記例では、以下のようなCSSも書いています。
|
1 2 3 4 5 6 7 8 9 |
<style> .swiper { position: relative; overflow: hidden; } .swiper .swiper-slide { width: 640px; } </style> |
その他のオプションについてはSwiper公式ドキュメントをご覧ください。
挙動も軽く、安定していて、jQueryが使えない環境ではかなりいいのではないでしょうか？
以上、jQuery不要なスライダープラグイン「Swiper」の実装方法についてでした。
関連記事こちらの記事も合わせてどうぞ。
SGE普及でSEOやWebサイトの価値はどう変わる？制作会社のメンバーにも聞いてみた！
2024.05.23
2023.09.07
