「Swiper」を使えば非常に簡単にスライダーを実装できるので、紹介したいと思います。
スライダーのイメージはこんな感じです。
Swiperの使い方
cssとスクリプトを読み込む
|
1 2 |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script> |
表示させたいimgを差し替える
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<div id="slider-contents"> <div class="container"> <div class="swiper-container swiper-container-horizontal"> <div class="swiper-wrapper"> <!-- スライダー画像--> <div class="swiper-slide swiper-slide-duplicate-next"> <img src="./img/sample1.jpg" alt=""> </div> <div class="swiper-slide swiper-slide-duplicate-next"> <img src="./img/sample2.jpg" alt=""> </div> <div class="swiper-slide swiper-slide-prev"> <img src="./img/sample3.jpg" alt=""> </div> <div class="swiper-slide swiper-slide-prev"> <img src="http://design-ec.com/d/e_others_50/l_e_others_500.png" alt=""> </div> <div class="swiper-slide swiper-slide-active"> <img src="http://design-ec.com/d/e_others_50/l_e_others_500.png" alt=""> </div> <!-- Slides end--> </div> <!-- swiper-wrapper end --> <div class="swiper-pagination swiper-pagination-bullets"> <span class="swiper-pagination-bullet"></span> <span class="swiper-pagination-bullet"></span> <span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span> </div> <!-- swiper-pagination end --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <!-- pavigation buttons end --> </div> <!-- swiper-container end--> </div> <!-- container end--> </div> <!-- #contents end --> |
プロパティを設定する
以下の例では、loop: true、autoplay：3000とすることで、3秒おきに画像を繰り返しスライドさせる設定にしてみました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<script> var mySwiper = new Swiper ('.swiper-container', { loop: true, slidesPerView: 5, spaceBetween: 10, centeredSlides : true, autoplay: 3000, autoplayDisableOnInteraction:false, pagination: '.swiper-pagination', nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev', breakpoints: { 1050: { slidesPerView: 4, spaceBetween: 10 }, 850: { slidesPerView: 3, spaceBetween: 10 }, 600: { slidesPerView: 3, spaceBetween: 10 }, 400: { slidesPerView: 2, spaceBetween: 5 } } }) </script> |
全体のソース
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset=UTF-8"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css"> <style> .swiper-container{ text-align: center; } .swiper-container .swiper-slide img{ width: 160px; height: 100px; border:1px solid; } #slider-contents{ max-width: 900px; margin: auto; margin-top: 2em; margin-bottom: 2em; } .swiper-slide { flex-shrink: 0; width: 100%; height: 100%; position: relative; } .swiper-pagination{ position: static; } .swiper-button-prev, .swiper-button-next{ top: 50px; } </style> </head> <body> <div id="slider-contents"> <div class="container"> <div class="swiper-container swiper-container-horizontal"> <div class="swiper-wrapper"> <!-- スライダー画像--> <div class="swiper-slide swiper-slide-duplicate-next"> <img src="./img/sample1.jpg" alt=""> </div> <div class="swiper-slide swiper-slide-duplicate-next"> <img src="./img/sample2.jpg" alt=""> </div> <div class="swiper-slide swiper-slide-prev"> <img src="./img/sample3.jpg" alt=""> </div> <div class="swiper-slide swiper-slide-prev"> <img src="http://design-ec.com/d/e_others_50/l_e_others_500.png" alt=""> </div> <div class="swiper-slide swiper-slide-active"> <img src="http://design-ec.com/d/e_others_50/l_e_others_500.png" alt=""> </div> <!-- Slides end--> </div> <!-- swiper-wrapper end --> <div class="swiper-pagination swiper-pagination-bullets"> <span class="swiper-pagination-bullet"></span> <span class="swiper-pagination-bullet"></span> <span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span> </div> <!-- swiper-pagination end --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <!-- pavigation buttons end --> </div> <!-- swiper-container end--> </div> <!-- container end--> </div> <!-- #contents end --> <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script> <script> var mySwiper = new Swiper ('.swiper-container', { loop: true, slidesPerView: 5, spaceBetween: 10, centeredSlides : true, autoplay: 3000, autoplayDisableOnInteraction:false, pagination: '.swiper-pagination', nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev', breakpoints: { 1050: { slidesPerView: 4, spaceBetween: 10 }, 850: { slidesPerView: 3, spaceBetween: 10 }, 600: { slidesPerView: 3, spaceBetween: 10 }, 400: { slidesPerView: 2, spaceBetween: 5 } } }) </script> </body> </html> |
imgだけ変えればすぐに使うことができるので、画像サイズやプロパティを変更しててみてください。
Swiperのメインプロパティ
調べてみるとものすごい数プロパティがあるようなので、ここではよく使うであろう最低限のプロパティを紹介します。
| プロパティ | 値 | 説明 |
|---|---|---|
| loop | true/false | 繰り返し設定 |
| slidesPerView | 5 | 一度に表示するスライド数の設定 |
| spaceBetween | 10 | スライドの間隔を指定（単位：px） |
| centeredSlides | true/false | 現在のスライドを中央に表示するかを設定 |
| autoplay | 3000 | 自動スライドする間隔。単位はms（3000ms＝3秒） |
| autoplayDisableOnInteraction | true/false | スライド操作後、自動再生を停止する設定。 |
| pagination | .swiper-pagination | ページネーションのセレクタ名を指定 |
| nextButton | .swiper-button-next | ボタンのセレクタ名を指定 |
| prevButton | .swiper-button-prev | ボタンのセレクタ名を指定 |
| breakpoints | 400: { slidesPerView: 2, spaceBetween: 5 } |
画面サイズと、画像サイズごとに設定するプロパティを指定する。カンマ（,）区切りで複数指定可能。 |
