【Rails5】「Swiper」を使ってスライダー、カルーセルを作る方法 #JavaScript

環境： ruby 2.5.1 / Rails 5.2.3 / MySQL 5.6.42 Homebrew
※ HTMLはHAML記法で書いているので、erb記法の場合は適宜変換してください。

目標 : 3枚の画像をカルーセル表示で横スクロールさせる

まずはSwipeのファイルをDLするか、CDNで実装する場合はリンクをコピーする。
【Swiper】　【CDN】← オススメ！

※ 今回はCDNで実装する方法で行います。

Step1. Swiperのスタイルシートを読み込む

✔︎ 下記をapplication.html.hamlに追加

= stylesheet_link_tag　"https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css"

application.html.haml

!!!
%html
  %head
    %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
    %meta{name: "viewport", content: "width=device-width,initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0"}/
    %title Sample
    = csrf_meta_tags
    = csp_meta_tag
    = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload'
-# ーーーここに追記しました　ーーー
    = stylesheet_link_tag    "https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css"
-# ーーーーーーーーーーーーーーーー
    = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
  %body
    = render 'layouts/flash'
    - mypage, logout = "not_selected"
    = yield

Step2. Swiperのjsファイルを読み込む

✔︎ 下記をスライダーを実装するHTMLファイルに追加

= javascript_include_tag "https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"
⚠️ スライダーのコードより後ろに置くこと。HTMLファイルの最後に置くのがベスト。

Step3. HTMLにSwiperのスクリプトを記述

index.html.haml

.wrapper
  %main
-# ---ここからSwiperのスクリプト---------------------------
-# クラス名はこのままつけること！ 
    -# main container
    .swiper-container.top-carousel
      -# slide wrapper
      .swiper-wrapper
        -# slides
        .swiper-slide
          = image_tag 'image01.jpg', alt: 'swipe01'
        .swiper-slide
          = image_tag 'image02.jpg', alt: 'swipe02'
        .swiper-slide
          = image_tag 'image03.jpg', alt: 'swipe03'
      -# if need navigation button 
      .swiper-button-prev
      .swiper-button-next
      -# if need pagination 
      .swiper-pagination
-#---ここまでSwiperのスクリプト----------------------------

Step4. JavaScriptファイルを作成（ファイル名は任意）

app/assets/javascripts/carousel.js

var mySwiper = new Swiper('.swiper-container', {
  autoHeight: true,
  loop: true,
  autoplay: {
    delay: 3000,
    disableOnInteraction: false,
    reverseDirection: false
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev'
  },
  pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
    clickable: true
  }
});

✔︎ オプション内容

オプション名	内容
autoHeight	true : スライドの高さに合わせてSwiperの高さも変える false(初期値) : Swiperの高さは一定
loop	true : 最後のスライドが表示された後は最初のスライドに戻る(初期値はfalse）
autoplay	true : 自動でスライドを切り替える。 * delay切り替わる間隔を指定。単位はms（3000ms=3秒）。 * disableOnInteractionでユーザーが操作した時の挙動を指定。falseにすると自動スライドを続ける。 * reverseDirectionでスライドする順番を指定。trueにすると最後のスライドから最初のスライドへ向かう順番になる。
navigation	前後の矢印ボタンをつける
pagination	スライド下部にページ送りボタンを表示する。 * elでページネーションのセレクタ名を指定。 * typeで送りボタンの表示形式を指定。bulletは丸●◯◯で表示。 * clickableをtrueにすることで、丸◯をクリックしてページ送りできるようにする。（type:'bullets'の時のみ有効）

オプションはかなりの種類があるので、参考URLを見てもらうかググってください♪

完成！！

（練習でメルカリさんのコピーサイトを作成しているのでこのスライドなのです・・・）

ちなみに・・・
デフォルトの矢印は青くてダサいのでFontAwesomeで指定しました。
ページネーションのマークもcssで色と大きさを変えています。

《参考》

・レスポンシブ対応でjQuery不要の高機能スライダー「Swiper」
・サンプル付き！簡単にスライドを作れるライブラリSwiper.js超解説（基礎編）
・Swiperを使用した基本的なスライダー実装から応用まで！実用的な6つのサンプル