スライダープラグイン 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>
例
  
  
    
    
  
  
  
  
  
  
    
    
    …