どうも、くらりんです。
今回はワードプレスのテーマonepressでのスライダー機能をSwiperを用いて実装していきたいと思います。
Swiperとは？
Swiper.jsはスライダーが作れるJavaScriptライブラリです。
そしてSwiperはjQuery非依存なので、jQueryなしでも使用可能です。
公式サイト
公式サイトは以下です。
公式サイト：https://swiperjs.com/get-started
英語ですが、すごくわかりやすく書かれているので
公式見るだけで大体はできちゃうかも・・・
手順
Swiperの手順はざっくりこんな感じ。
①ライブラリを読み込む
→今回はCDNで読み込みます。
②ベースとなる要素（HTML/CSS）
③ベースとなる要素（JSの設定）
④（オプション設定）
ソースコード
下記のコードを貼り付ければすぐに使えるようになります。
-- ②ベースとなるHTML要素
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
-- 好きな写真を追加する
</div>
<div class="swiper-slide">
-- 好きな写真を追加する
</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>
-- ①スクリプトの読み込み
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
-- ②CSSの読み込み
<link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css"/>-- ③JSの設定
<script>
var swiper = new Swiper(".mySwiper", {
-- ④オプション
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
// And if we need scrollbar
scrollbar: {
el: '.swiper-scrollbar',
},}); </script> 実装例はこんな感じ↓
footer.phpとかにswiperを読み込むscripタグなど書いてしまえば、
あとはワードプレスの投稿でもベースとなるHTMLを記述するだけで
どこでもスライダーが実装できてしまいます！
とても簡単なので、みなさんも使ってみてください！
P.S.
ちなみにバナー画像は先輩に教えてもらった無料のデザインツールCanvaで自作しています！
