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

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

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

まずはSwipeのファイルをDLするか、CDNで実装する場合はリンクをコピーする。
[【Swiper】](http://idangero.us/swiper/)　[【CDN】](https://cdnjs.com/libraries/Swiper)← オススメ！

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

### Step1. Swiperのスタイルシートを読み込む
**✔︎ 下記をapplication.html.hamlに追加**

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

```ruby: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のスクリプトを記述

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

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

#### 完成！！
（練習でメルカリさんのコピーサイトを作成しているのでこのスライドなのです・・・）
[![Image from Gyazo](https://i.gyazo.com/903699448a1f2f134dc8b199ad77fbee.png)](https://gyazo.com/903699448a1f2f134dc8b199ad77fbee)
ちなみに・・・
デフォルトの矢印は青くてダサいのでFontAwesomeで指定しました。
ページネーションのマークもcssで色と大きさを変えています。

#####《参考》
・[レスポンシブ対応でjQuery不要の高機能スライダー「Swiper」](https://www.willstyle.co.jp/blog/724/)
・[サンプル付き！簡単にスライドを作れるライブラリSwiper.js超解説（基礎編）](https://garigaricode.com/swiper/)
・[Swiperを使用した基本的なスライダー実装から応用まで！実用的な6つのサンプル](https://xn--web-oi9du9bc8tgu2a.com/js-swiper-sample/)