当サイトにはプロモーションが含まれます。
サイト運営

cocoonでSwiper(v6)を使ったスライダーを作る備忘録

Swiperのブログ画像

Swiperを使ってスライダーを作る機会があったので、備忘録としてまとめました。

・Swiper:バージョン 6.8.3
・実施環境:Chrome(バージョン 92.0.4515.159)

スポンサーリンク

cocoonでのSwiperの実装方法

CSS/JSファイルをダウンロードする

ダウンロード方法は「Web 制作リファレンス / Web Design Leaves」様の方法を参考にさせていただきました。

こちらの記事の「ダウンロード」を参考に、CSS/JSファイルをダウンロードします。

※過去のバージョンのファイルを見たい場合は、

https://unpkg.com/browse/swiper@XXX/

のXXXをバージョンの数字に変えます。

例えば、バージョン 6.8.3の場合はhttps://unpkg.com/browse/swiper@6.8.3/になります。

CSS/JSファイルを置く

WordPressのテーマ「cocoon」のアップデート時に上書きで消えるのを防ぐため、子テーマ配下にファイルを置きました。

新しく「swiper」フォルダを作り、その中に配置しています。

パス:/public_html/wp-content/themes/cocoon-child-master/swiper

▼子テーマ配下に「swiper」フォルダを作成

Swiperのブログ画像

▼swiperの中に、ダウンロードしたCSS/JSファイルを配置

Swiperのブログ画像

ファイルを読み込ませる

それぞれ以下の場所にファイルを読み込む記述を書きます。

ページ読み込みスピードなどを考慮して、お好みで変えて下さい。

▼swiper-bundle.min.jsの読み込み

<script src="/wp-content/themes/cocoon-child-master/swiper/swiper-bundle.min.js"></script>
Swiperのブログ画像

▼swiper-bundle.min.cssの読み込み

<link rel="stylesheet" href="/wp-content/themes/cocoon-child-master/swiper/swiper-bundle.min.css">
Swiperのブログ画像

実装する

こちらも「Web 制作リファレンス / Web Design Leaves」様の記事を参考にコードを書いていきます。

「スライダーの HTML」~をご参考下さい。

cocoonの場合は個々の記事にカスタムCSS/JavaScriptを書けるので、下の写真のように書きました。

カスタムJavaScriptに書く際は、コード(参考リンクの「スライダーの初期化」~)の<script></script>は省いて下さい。

Swiperのブログ画像

プレビューで見て、動いているようであれば成功です。

Swiperのブログ画像