【javascript】JQueryを使わないカルーセル"swiper"!!
久しぶりです。 (10日間くらいの大型連休サボりでしました。自粛ってやつですね。)
最近カルーセルを実装したのですが、前回のように「slick」ではなく 「swiper」というプラグインを使いました。その紹介です。
See the Pen w- "swiper" by たまき こう (@ulqvhvox) on CodePen.
swiperの使い方
1 まずCDNを読み込みます
<html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css"> </head> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script> </body> </html>
2 "swiper-container"を作り、その中に"swiper-wrapper"、
そしてその中に"swiper-slide"というクラス名のスライドを入れ込む形で記述します。
<!-- コンテナー --> <div class="swiper-container"> <!-- wrapper --> <div class="swiper-wrapper"> <!-- スライド --> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> ... </div> <!-- 任意でページネーションや、ナビゲーションをつけても良い --> </div>
3 jsファイルに以下のコードを追記しましょう!
スワイプの表示設定に関するコードです。
var mySwiper = new Swiper ('.swiper-container', { effect: "flip", loop: true, pagination: '.swiper-pagination', nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev', })
その他のパラメーターに関しては以下のリンクに記載されています。
Swiper API
//スライド方向を縦に direction: "vertical", //無限にスライドできるように loop: true, //スライドのスピードを1000msに speed : 1000, //ブレークポイントを設定する breakpoints: { // ウィンドウサイズが700px以下 700: { slidesPerView: 1, spaceBetween: 10 } } //自動再生 autoplay: { delay: 5000, },
など、様々なパラメータが存在しますのでお試しください笑
4 任意ですが、ナビゲーションやページネーションをつける時は、 index.thmlに下のコードを追記します。
<div class="swiper-container"> <!-- wrapper --> <div class="swiper-wrapper"> <!-- スライド --> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> ... </div> <!-- ↓↓↓ここから↓↓↓ --> <!-- ページネーション --> <div class="swiper-pagination"></div> <!-- ナビゲーション --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div>
いかがでしたでしょうか!
私個人としては、もう一つのslickよりシンプルで使いやすいようなイメージです。
そこまで、複雑じゃないスライダーであればこっちを使っていこうと思いました!!
ではでは!!