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

例