tamakipedia

フロントエンドエンジニア。Typescriptもう特訓中です。一日の振り返りや学んだことをちょっとずつ吐いています。

【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よりシンプルで使いやすいようなイメージです。
そこまで、複雑じゃないスライダーであればこっちを使っていこうと思いました!!

ではでは!!