【画像スライダー】Swiperの使い方をさっくりとメモ【プラグイン】

やっぱりこれに落ち着いてしまいます。

jQuery のいらないレスポンシブ対応の画像スライダープラグイン。
Swiperです。

Swiper - The Most Modern Mobile Touch Slider

Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.

swiperjs.com

まずは読み込みの設定

公式でもCDNを書いてくれていてありがたいです。

CSSとJSファイルを読み込みますよ。

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

スライドさせたい画像のHTML

<!-- スライダーの大枠 -->
<div class="swiper-container">
    <!-- スライド用の枠 -->
    <div class="swiper-wrapper">
        <!-- スライドさせたい画像（複数可） -->
        <div class="swiper-slide"><img src="image01.jpg" alt="example01"></div>
        <div class="swiper-slide"><img src="image02.jpg" alt="example02"></div>
        <div class="swiper-slide"><img src="image03.jpg" alt="example03"></div>
        ...
    </div>
    <!-- ページネーションが必要な時の記述 -->
    <div class="swiper-pagination"></div>

    <!-- スライド左右の戻る・進むボタンが必要な時の記述 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <!-- スクロールバーが欲しいなって思った時の記述 -->
    <div class="swiper-scrollbar"></div>
</div>

そして画像を動かす

<script>
var mySwiper = new Swiper('.swiper-container', {
  // オプション
  direction: 'vertical',
  loop: true,

  // ページネーションを使う時の記述
  pagination: {
    el: '.swiper-pagination',
  },

  // 左右の戻る・進むボタンを使う時の記述
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // スクロールバーが欲しい時の記述
  scrollbar: {
    el: '.swiper-scrollbar',
  },
})
</script>

以上さっくりとメモしました。
スライダーを動かすようにした後はCSSの調整が必要になります。