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

例