28
19

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2019-04-27

環境 : 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を見てもらうかググってください♪

完成!!

(練習でメルカリさんのコピーサイトを作成しているのでこのスライドなのです・・・)
Image from Gyazo
ちなみに・・・
デフォルトの矢印は青くてダサいのでFontAwesomeで指定しました。
ページネーションのマークもcssで色と大きさを変えています。

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

28
19
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
28
19

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?