非jQuery スライダー swiper

ライブラリ参照

swiper公式サイト
http://idangero.us/swiper/
CDN
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/X.X.X/css/swiper.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/X.X.X/js/swiper.min.js"></script>

ファイル参照
<link rel="stylesheet" href="~/swiper.min.css">
<script src="~/swiper.min.js"></script>

実装

スライダー部分
<div class="swiper-container">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- スライド部分 -->
    <div class="swiper-slide">画像や文章</div>
    <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>
スライダー設定
<script>
var appendNumber = 3;
var prependNumber = 1;
var swiper = new Swiper('.swiper-container', {

  ループさせる場合
  loop: true,
  
  ループさせる場合の速度
  speed: 1000,
  
  スライド数
  slidesPerView: 3,
  
  画像の中心部分で揃える
  centeredSlides: true,
  
  スライド間の横間隔
  spaceBetween: 30,
  
  ページネーション(スライダー下の〇〇〇)
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },   
  ナビゲーションボタン(スライダー左右の矢印)
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  
  レスポンシブ
  breakpoints: {
    543px以下の場合の挙動
    543: {
      スライド数を1に変更
      slidesPerView: 1
    }
  }
  });
})
</script>

     
         
画像や文章
    
画像や文章
    
画像や文章
    …   
     
        
  

株式会社米良太事務所の最新情報をお届けします

1週間でできる会員サイト「Limited」

1週間でできる会員サイト「Limited」
必要最小限。だから分かりやすい。始めやすい。続けやすい。
限定① 安⼼・安全の会員制
限定② 必要最⼩限の機能
限定③ 独⾃機能を追加可能