Web制作ではスライダーの実装は非常に良くある実装の1つです。
このブログではslickというプラグインを使った実装を多くご紹介していますが、もう1つ有名なスライダープラグインがあります。
それがSwiperです。
今回はSwiperを使った基本的なスライダーの実装方法を解説していきます。
今だけ！5大無料特典あり🎁
スライダープラグイン Swiperとは？
スライダーのプラグインといえばslickかSwiperの2択になると思いますが、この2つの大きな違いはjQuery依存か非依存かとなります。
そしてSwiperはjQuery非依存なので、jQueryなしでも使用可能です。
またSwiperはslickにはない様々なエフェクトが用意されています。
ただ実務で使う分には特殊なエフェクトが必要とされるケースは基本的になく、私はslickでほぼ問題なく納品出来ています（1〜2回Swiperでしか実装できないものがありましたが）
jQuery禁止案件や、ポートフォリオで凝ったスライダーを実装したい場合などはSwiperの方がいいかも知れません。
Swiper.jsの基本的な使い方
それでは早速Swiperを使ってスライダーを作っていきましょう。
手順は以下のようになります。
- 必要なファイルをDLして読み込む or ライブラリをCDNで読み込む
- HTMLでスライダーを動かすのに必要なclassを付けながらコードを書く
- JavaScriptを書く
あとは必要に応じてCSSやJavaScriptにオプションを書いていきます。
ライブラリをCDNで読み込む
ファイルをDLするか、CDNで読み込むか2つの方法がありますが、今回はCDNで読み込む方法で解説していきます。
以下のコードをheadタグに書きます。
<link
rel="stylesheet"
href="https://unpkg.com/swiper@8/swiper-bundle.min.css"
/>
<script sec="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>もしファイルをDLして読み込みたい場合は、こちらにアクセスしてコードをコピーして下さい。
右上にあるView Rawをクリックすればコードが全部表示されます。
注意ポイント
上記URLからアクセスした際は最新版を選択するようにしましょう。
HTML
次はHTMLを書いていきます。
最初は出来る限りシンプルなスライダーを作っていきます。
<div class="swiper"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="画像パス" alt=""> </div> <div class="swiper-slide"> <img src="画像パス" alt=""> </div> <div class="swiper-slide"> <img src="画像パス" alt=""> </div> </div> </div>
画像が3枚あるスライダーです。
slickと違い、class名を変えると動かないのでご注意ください。
注意ポイント
ただ試しに一番大枠のswiperのclass名はJavaScriptも同様に変えれば動きました・・・が、上記のような騒動もあったのでなるべくclass名は公式ページに書いてある通りにしておきましょう（swiper-wrapperとswiper-slide は変えたら動かなくなりました）
CSS
これは書かなくても動きますが、とりあえず画像サイズだけ整えておきます。
.swiper-slide img {
height: auto;
width: 100%;
}
JavaScript
最後にJavaScriptを書きます。
これも一旦最小限のコードにします。
const swiper = new Swiper(".swiper", {});
ここまで書けたら一旦スライダーが機能するか試してみましょう。
こちらがここまでのコードで実装したスライダーです。
See the Pen
Swiper（最小限のコード） by junpei (@junpei-sugiyama)
on CodePen.
一応動いてはいるので、Swiperは正常に機能しているという確認が出来ました。
あとはもう少しカスタマイズしてみましょう。
前後の矢印、ドットインジケーター、スクロールバーを表示
先ほどのJavaScriptに矢印、ドットインジケーター、スクロールバーを表示させる為のコードを追記します。
<div class="swiper"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="画像パス" alt=""> </div> <div class="swiper-slide"> <img src="画像パス" alt=""> </div> <div class="swiper-slide"> <img src="画像パス" alt=""> </div> </div> <!-- ページネーション --> <div class="swiper-pagination"></div> <!-- 前後の矢印 --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <!-- スクロールバー --> <div class="swiper-scrollbar"></div> </div>
const swiper = new Swiper(".swiper", {
loop: true,
// ページネーション
pagination: {
el: ".swiper-pagination",
clickable: true, // クリック有効化
},
// 前後の矢印
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
// スクロールバー
scrollbar: {
el: ".swiper-scrollbar",
},
});そしてこちらが3つを実装したスライダーです。
See the Pen
Swiper（矢印、ドットインジケーター） by junpei (@junpei-sugiyama)
on CodePen.
ただ、スクロールバーはほとんどのケースで不要かと思うので、スクロールバーは削除していいかも知れません。
こちらがスクロールバーを削除したスライダーです。
See the Pen
Swiper（矢印、ドットインジケーター、スクロールバー） by junpei (@junpei-sugiyama)
on CodePen.
以上になります。
関連記事slick記事一覧
関連記事Swiper記事一覧
- コピペで使えるWordPressの各テンプレート
- 実務でよく使う見出し一覧
- 実務でよく使うテキストのhoverアニメーション
- 実務でよく使うボタン内の矢印9種類
- Contact Form 7の色々・・・
今だけ！5大無料特典あり🎁
