Swiper.js使い方
Swiper.jsはv7.0.0からHTMLに書く書き方(class名)が変更されているので注意すること。
基本的な使い方
参考サイト
- スライダープラグイン Swiper の使い方
- 「Swiper」の使い方とオプションを使ってカスタマイズする方法
- 【2021年】swiper.jsの使い方【最新バージョン7.0】
- jQuery不要!swiper.jsをカスタマイズ(複数設置/矢印/ページネーション)
- レスポンシブ対応でjQuery不要の高機能スライダー「Swiper」
- Swiper.jsをWordPressに追加。動きもいいしカスタムも簡単で秀逸だわ〜
- Swiperでパララックス スライダーを実装する方法 - サムネイル付き

function.php書き方
function swiper_enqueue_parent(){
// Swiper css
wp_enqueue_style('swiper-css', get_stylesheet_directory_uri() . '/swiper/swiper-bundle.min.css');
// Swiper js
wp_enqueue_script('swiper-js', get_stylesheet_directory_uri() . '/swiper/swiper-bundle.min.js', array(), '7.0.0', true);
// 作成したJavascriptファイル
wp_enqueue_script('swiper-js', get_stylesheet_directory_uri() . 'Javascriptのファイルパス', array(), '7.0.0', true);
}HTML書き方
<!-- v7.0.0からの変更点 .swiper-container →.swiper -->
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="画像URL" alt="">
</div>
<div class="swiper-slide">
<img src="画像URL" alt="">
</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>Java script書き方
var Swiper = new Swiper('.swiper', {
direction: 'horizontal', // スライドの方向 default:horizontal(横) vertical(縦)
speed: 300, // スライドの遷移時間(ミリ秒) default:300
effect: 'slide', // スライドエフェクト default:'slide', 'fade', 'overflow', 'flip'
spaceBetween: 0, // スライド同士の余白(px) default:0
slidesPerView: 1, // 1度に表示するスライド数
loop: false, // スライドをループ default:false
breakpoints: 無し, //サイズごとに異なるパラメータを設定 default:無し
navigation: { // スライドナビゲーション(前後ボタン)
nextEl: '.swiper-button-next', // 次へボタンclass名 default:null
prevEl: '.swiper-button-prev', // 前へボタンclass名 defautt:null
hideOnClick: false, // スライドコンテナクリック時のボタンを表示するか default:false
disabledClass: 'swiper-button-disabled', // 前後がない時にナビゲーションボタンに追加されるclass名 default:swiper-button-disabled
hiddenClass: 'swiper-button-hidden', // 非表示になったときに追加されるclass名 default:swiper-button-disabled
},
pagenation: { // スライドページネーション(何枚目のスライドか)
el: '.swiper-pagination',
type: 'bullets',
},
scrollbar: { // スクロールバー
el: '.swiper-scrollbar',
draggable: true,
},
autoplay: { // 自動再生
delay: 5000, // 1000=1秒
disableOnInteraction: false, // 操作したら自動再生をストップ default:false 自動再生を継続します。
},
});

