レスポンシブやスマホ・タブレットのスワイプに対応したスライダープラグインをご紹介します。
jQueryは不要です。
1.swiper用cssファイル読込とデモ用CSS記述例
※必要に応じて書き換えてください。
<!-- Link Swiper's CSS --> <link rel="stylesheet" href="./swiper-bundle.css" /> <!-- Demo styles --> <style> html, body { position: relative; height: 100%; } body { background: #eee; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; color: #000; margin: 0; padding: 0; } .swiper-container { width: 100%; height: 100%; } .swiper-slide { text-align: center; font-size: 18px; background: #fff; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; } </style>
2.スライダー箇所HTMLの記述例
※必要に応じて書き換えてください。
<!-- Swiper --> <div class="swiper-container mySwiper"> <div class="swiper-wrapper"> <div class="swiper-slide">スライド 1</div> <div class="swiper-slide">スライド 2</div> <div class="swiper-slide">スライド 3</div> <div class="swiper-slide">スライド 4</div> <div class="swiper-slide">スライド 5</div> <div class="swiper-slide">スライド 6</div> <div class="swiper-slide">スライド 7</div> <div class="swiper-slide">スライド 8</div> <div class="swiper-slide">スライド 9</div> <div class="swiper-slide">スライド10</div> <div class="swiper-slide">スライド11</div> <div class="swiper-slide">スライド12</div> </div> <div class="swiper-pagination"></div> </div>
3.swiper Jsファイル読込とJavaScritpの記述
※パラメータでスライド枚数やスピード等の設定が可能です。必要に応じて書き換えてください。
以下、「ソース元:Swiper Demos」をご参考下さい。
<!-- Swiper JS --> <script src="./swiper-bundle.js"></script> <!-- Initialize Swiper --> <script> var swiper = new Swiper(".mySwiper", { slidesPerView: 3, spaceBetween: 30, pagination: { el: ".swiper-pagination", clickable: true, } }); </script>
※流用される場合は自己責任でお願いします。
ソース元:Swiper Demos