【脱jQuery!!】Swiper.jsを導入する

PF作成にあたって、スライダーを初めて実装する。

スライダーのjsプラグインで有名なのはslick.jsとswiper.js。

どちらにしようか迷ったが、21年3月現在、Swiperの方が評価が高そうなのでSwiper.jsを導入することにした。

選んだ理由

①issueの数がSwiperの方が少なく、GithubのFork数を比較してもSwiperの方が二倍近く多い。

・SwiperのGithub
・SlickのGithub

(ちなみに2015年のLIGさんの比較記事では、”容量は大きいですが、GitHubでの評価は非常に高く、issueもかなり少なめ”だが「モダンブラウザのみの対応なので使いどころが限られる」とあったが、21年現在解決済な様子。

②Slickと違ってjQueryに依存しない

③フルスクラッチで実装すると面倒くさいらしい

ちなみにフルスクラッチでスライダー(またはカルーセル)を作ろうとすると"機能追加だったりで工数が嵩んだりする"らしい(ソースはこちらのブログ) 。

そもそも実装する技術を現時点で持っていないけれども..

公式の使い方はこちら

色々調べましたが、最初にこの公式ドキュメント通りにやってみて、
カスタマイズの仕方だけ別途調べた方がいいと思います。
英語ですがわかりやすいです。
CDNの導入から完結に解説してくれてます。

公式が公開してるデモはこちら↓

下手なサイト見るより豊富。
ただ、ソースコードみてもhtmlしか見れなくて、cssがどこにあるかわからなかった。

使い方(HTMLにCDNを設置する)

最新のversionのCDNのリンクはこちら

index.html

//これはhead内
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" />
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />

//こっちは</body>直前。jQueryリンクの後、生jsのscriptタグより前に記述。多分。
<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

基本のHTML構造

下記のはdivになってるけど、swiper-wrapperクラスとswiper-slideクラスのところはul>liとかでも行けるっぽい。

index.html

<!-- スライダー全体を括るメインコンテナ -->
<div class="swiper-container">
    <!-- 全スライドをまとめるラッパー -->
    <div class="swiper-wrapper">
        <!-- 各スライド -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</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>

liにした場合の子要素は？

liはdiv同様フローコンテンツを入れ子のタグとして含めることができる万能タグ。
liタグに入れられるタグ一覧↓
a / article / aside / audio / b / blockquote / br / button / canvas / cite / code / div / dl / em / figure / footer / form / h1 / h2 / h3 / h4 / h5 / h6 / header / hgroup / hr / i / iframe / img / input / label / main / nav / ol / p / picture / pre / script / section / select / small / span / strong / svg / table / template / textarea / time / ul / video

divを多用するよりかはリストを使った方がいい気がするのでこれで実装していく。

参考サイト

ボリュームが少ない参考サイトから記録に残す。上から順に読んでくと割とわかりやすいと思う。

jsでの制御に関する解説がめちゃくちゃわかりやすいサイト↓
js解説の後にはcode.penを埋め込んであるデモが見れるので、気になるデモがあればcss記述がどんなのになってるのかわかる。

「便利すぎ！jQuery不要のスライダー「Swiper.js」で色々と遊んでみよう」

オプションについてのまとめがめちゃくちゃ詳しいサイト↓

この記事が一番詳しくてjs記述についてもわかりやすかった。けどcssの記述はほぼなし↓

この記事はcssの記述まであって良きだった
画像ではなく文章コンテンツを入れ込みたい場合はこう！みたいなときに参考になる↓

Swiperのページネーションをカスタマイズできるサイト↓

備考

検索する過程でSlick.jsやSwiper.js等が全く動かず小一時間無駄にした話が検索トップに出てきたので見てみましたが、Vue.jsとコンフリクトしたのが原因だったという結論だったので、そもそも使ってない人には関係ない話でした。