【2023年】初心者向け・初めてのSwiper.jsの使い方とオプションを解説

webサイトを作るにあたってほぼ必須と言っても良い機能が、「スライドショー」ではないでしょうか？

自分で一から製作するのはかなりしんどい機能ですが、Swiper.jsを使えばかなり簡単にスライドショーを実装することが可能になります。

Swiper.jsは、jQueryに依存しないプラグインですので、様々な場面で活用できる汎用性の高い万能プラグインです。

また、jQueryに依存しないことによって、比較的高速に読み込みことが可能というのも魅力です。

ぜひ使い方をマスターしましょう！

Swiperを導入しよう！

まず初めにSwiperを読み込んでみましょう。

公式ページはこちら

トップページメニューの一番左のGet Startedから、Use Swiper from CDNを参照し、コードを持ってきてください。

ファイルをダウンロードしたい場合は、その次のDownload assetsからリンク先へ移動しましょう。

リンク先を自分のファイルの中に、別名で保存しましょう。

Swiperを使ってみよう！

HTMLの基本構造

Swiperの基本構造は下記のようになります。

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">first slide</div>
    <div class="swiper-slide">second slide</div>
    <div class="swiper-slide">third slide</div>
  </div>
</div>

注意点として、class名は決まったものしかダメということです。

swiper-wrapperと、swiper-slideは名前変更NGですので、スペルミスなど注意してください！

JavaScriptの基本構造

HTMLの準備が整ったら、JavaScriptの記述です。

基本形は下記になりますので、一度コピペして動作確認することをお勧めします。

const swiper = new Swiper(".swiper", {});

第一引数には、スライドさせたい親のclass名を記述します。

セレクタを書くので、クラス名指定の時は、先頭に「.」を忘れないようにしましょう。

イメージとして、document.querySelectorで指定する書き方と同じです。

第二引数には、必要であればオプションを記述していきます。

Swiperが動かない時の対処法

この時点でswiperがうまく動いていない場合は、どこかで不具合が発生しています。

どれかに当てはまっでいないか確認してみましょう。

• CDNの場合、CSS・JavaScriptファイルをきちんと読み込めているか？
• 自分で準備したjsファイルより先にに読み込んでいるか？
• クラス名は決められているものがついているか？

Swiperをカスタマイズしよう！

Swiperには様々なオプションがあります。

代表的なものをご紹介しますので、色々カスタマイズして遊んでみてください！

実際にオプションを設定する際に、最も混乱するのはbreakpointsの設定かと思います。

上記のコードではブレイクポイントを768pxとしています。

直感的に、768px以下の時はスライド枚数を２枚にするのか？となりますが、Swiperはbreakpointsの数値(px)以上の幅の時の設定を{}の中に記載します。

@media(min-width: 768px)とおんなじですね！

すこし記述に慣れが必要ですが、とても便利なプラグインでコーディングの幅も広がるので、ぜひチェックしてみてください！

まとめ

swiperの基本的な使い方を解説しました。

スライダー機能は非常によく使用するので、ぜひswiperを使ってみてください！