Swiper.js使い方

Swiper.jsはv7.0.0からHTMLに書く書き方(class名)が変更されているので注意すること。

基本的な使い方

参考サイト

dlの場所。○を右クリックで名前を付けて保存

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 自動再生を継続します。
  },
});
  • X