Swiperを使ってスライダーを作る機会があったので、備忘録としてまとめました。
・Swiper:バージョン 6.8.3
・実施環境:Chrome(バージョン 92.0.4515.159)
cocoonでのSwiperの実装方法
CSS/JSファイルをダウンロードする
ダウンロード方法は「Web 制作リファレンス / Web Design Leaves」様の方法を参考にさせていただきました。
こちらの記事の「ダウンロード」を参考に、CSS/JSファイルをダウンロードします。
CSS/JSファイルを置く
WordPressのテーマ「cocoon」のアップデート時に上書きで消えるのを防ぐため、子テーマ配下にファイルを置きました。
新しく「swiper」フォルダを作り、その中に配置しています。
パス:/public_html/wp-content/themes/cocoon-child-master/swiper
▼子テーマ配下に「swiper」フォルダを作成
![Swiperのブログ画像](https://ohilog.com/wp-content/uploads/2021/08/swiper-1.jpg)
▼swiperの中に、ダウンロードしたCSS/JSファイルを配置
![Swiperのブログ画像](https://ohilog.com/wp-content/uploads/2021/08/swiper-2.jpg)
ファイルを読み込ませる
それぞれ以下の場所にファイルを読み込む記述を書きます。
ページ読み込みスピードなどを考慮して、お好みで変えて下さい。
▼swiper-bundle.min.jsの読み込み
<script src="/wp-content/themes/cocoon-child-master/swiper/swiper-bundle.min.js"></script>
![Swiperのブログ画像](https://ohilog.com/wp-content/uploads/2021/08/swiper-3-1.jpg)
▼swiper-bundle.min.cssの読み込み
<link rel="stylesheet" href="/wp-content/themes/cocoon-child-master/swiper/swiper-bundle.min.css">
![Swiperのブログ画像](https://ohilog.com/wp-content/uploads/2021/08/swiper-4.jpg)
実装する
こちらも「Web 制作リファレンス / Web Design Leaves」様の記事を参考にコードを書いていきます。
「スライダーの HTML」~をご参考下さい。
cocoonの場合は個々の記事にカスタムCSS/JavaScriptを書けるので、下の写真のように書きました。
カスタムJavaScriptに書く際は、コード(参考リンクの「スライダーの初期化」~)の<script></script>は省いて下さい。
![Swiperのブログ画像](https://ohilog.com/wp-content/uploads/2021/08/swiper-5.jpg)
プレビューで見て、動いているようであれば成功です。
![Swiperのブログ画像](https://ohilog.com/wp-content/uploads/2021/08/swiper.gif)
![](https://ohilog.com/wp-content/plugins/pochipp/assets/img/pochipp-logo-t1.png)