環境 : 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"
!!!
%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のスクリプトを記述
.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ファイルを作成(ファイル名は任意)
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つのサンプル