【サンプルあり】Swiper.jsの使い方【コピペOK】

HTML&CSS

こんにちはtakosanです。

今回はスライドショーを作成できるライブラリ「Swiper.js」を紹介します。

Swiperとは?

Swiperとはカルーセル(スライドショー)を簡単い埋め込めるJavascriptのライブラリです。

Webサイト制作においてかなり需要が高く、使用頻度も高いのでこの機会にご紹介しようと思います。

また、制作などですぐ使えるようにできるだけ解説付き&コピペOKで紹介しますので、

お役に立てれば幸いです。

使い方

まず、Swiper.jsの入手方法は二つあります。

1つ目はダウンロードでの入手

2つ目はCDNでの利用

です。

今回はCDNを利用する方法で紹介します。

準備

CDN(CSS)

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/css/swiper.min.css" />

上記を</head>の直前に書きます

CDN(JS)

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/js/swiper.js"></script>

上記を</body>の直前に書きます

HTML

    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <div class="slide-img slide01"></div>
            </div>
            <div class="swiper-slide">
                <div class="slide-img slide02"></div>
            </div>
            <div class="swiper-slide">
                <div class="slide-img slide03"></div>
            </div>
        </div>
    </div>

HTMLはこんな感じです。

サンプル3つ

さて、次に実際に動くSwiperを紹介します。

早速完成品のサンプルをみていきましょう。

1.ドラッグでスライドできる

See the Pen swiper01 by yukiwebcreate (@Yukiwebcreate) on CodePen.

ほとんど設定なしの状態のSwiperです。

コードの詳細はcodepen内部のタブを押して切り替えてご覧ください。

ほぼ何もJSを書かなくてもドラッグやスワイプで動かせるスライドショーは実装できます。

2.ページ送り矢印+ページネーション

See the Pen swiper02 by yukiwebcreate (@Yukiwebcreate) on CodePen.

上の1で紹介したものにページネーションと画像を切り替える矢印を追加しました。

これを追加するだけでもかなりユーザビリティが向上します。

3.画像がズームしながらフェードアウトで切り替わる

See the Pen Swiper03 by yukiwebcreate (@Yukiwebcreate) on CodePen.

画像が左右に動くのではなく、ズームしてフワッと切り替わって行きます。

実案件でも納品したことのあるパターンで、お客様からこういう感じと指定される時もあります。

ここまで来ると一体何をどうしてるんだ感があるので補足しておきます。

JSの欄の

effect:'fade',

これはSwiperのオプション値のひとつで、

「どういうエフェクトでスライドが切り替わるか」

というのを指定する項目です。今回はフェードアウトして切り替わるようにfadeとしています。

loop:true,
speed:2000,

こちらはスライドが一周した際に、また1枚目に戻るかの設定「loop」と

スライドが動いていくスピードを指定する「speed」のオプション項目です。

speedは数値を変えることで速度を変えることができます。

autoplay: {
            delay: 5000,
        }

autoplayは自動でスライドを進めてくれるオプションです。

たいていのスライドショーには指定されているような気がします。

delayはどれくらいの間隔でスライドを切り替えるかの指定です。

先ほどのspeedは画像の切替アクション自体の早さで、

こちらはスライドを表示し続ける時間と考えるとわかりやすいですね。

【トラブルシューティング】Swiperが動かない?

もしSwiperが動かない時は、以下の点を確認してみましょう

  • CDNファイルがちゃんと読み込まれているか?
  • リンクは正しくつながっているか
  • バージョンが変わっていないか

記事で紹介した時点とファイルの置き場所やバージョンが変わっている場合もあります。

あらゆる可能性を考えてうまく行かない理由を考えてみましょう。

プログラミングのいいところは、うまく行かない時、”必ず原因があること”です。

動かないなどのトラブルがあっても冷静に前向きに探していきましょう!

細かい話

今回使用したSwiperはいわゆる5系です
IEのサポートは4系で終わっているため、

IEにどうしても対応させたい!という方は4系のSwiperを使うがおすすめです。
ただし、その場合CDNでの利用はお勧めできません。
今後IEの衰退を踏まえて、Swiperの開発元が

「もう4系のCDNいらないか!」

と消してしまった瞬間使えなくなってしまうからです。
それでもIEでなんとか使いたいという方はDLでの利用をお勧めします。

ちなみに似たライブラリでslick.jsもありますが、

使いやすさでは個人的にswiperの方に軍配が上がるので、

大体のスライドショー(カルーセル)はSwiperでいいと思います。

タイトルとURLをコピーしました