レスポンシブルでオプションも豊富なコンテンツ・スライダーの “bxSlider” が Ruby on Rails の gem でもありましたので使ってみました。
本記事ではあらかじめ Article モデルに 画像を格納する image カラムがあって、 数件データが入っていることを前提にすすめていきます。
bxSlider Rails
https://github.com/manfe/bxslider-rails
環境はこちらです
|
1 2 3 4 |
ruby 2.5.1 rails 5.1.6 docker 18.06.0-ce bxslider-rails 4.2.5.1 |
準備
Gemfile
|
1 2 |
gem 'bxslider-rails' gem 'jquery-rails' #rails5はこれを入れないとjQueryが動きません |
app/assets/javascripts/application.js
|
1 2 3 |
//= require jquery //= require rails-ujs //= require bxslider |
app/assets/stylesheets/application.css.scss
|
1 2 3 4 |
*= require bxslider *= require_tree . *= require_self */ |
Controllers
ここではシンプルに全件取得とします。
app/controllers/top_controller.rb
|
1 2 3 4 5 6 7 |
class TopController < ApplicationController def index @articles = Article.all end end |
Views
ここでは each で 取り出された article の image と title を link_to do ~ end で囲っています。
app/views/top/index.html.erb
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<ul class="bxslider"> <% @articles.each do |article| %> <li> <%= link_to article_path(article) do %> <% if article.image? %> <%= image_tag article.image.to_s %> <% else %> <%= image_tag 'no_image.png' %> <% end %> <h4><%= article.title %></h4> <% end %> </li> <% end %> </ul> |
jQuery
ここでは適当な js ファイルを作成しています。こちらのオプションは本記事のサンプルとして動作させているものです。
app/assets/javascripts/bxslider.js
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$(document).ready(function(){ $('.bxslider').bxSlider({ auto: true, // 自動スライド speed: 1000, // スライドするスピード moveSlides: 1, // 移動するスライド数 pause: 3000, // 自動スライドの待ち時間 maxSlides: 4, // 一度に表示させる最大数 slideWidth: 250, // 各スライドの幅 randomStart: true, // 最初に表示するスライドをランダムに設定 autoHover: true // ホバー時に自動スライドを停止 }); }); |
boxSlider オプション デフォルト値
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
// GENERAL mode: 'horizontal', // 'horizontal'横スライド, 'vertical'縦スライド, 'fade'フェード切り替え slideSelector: '', // デフォルト値はなし infiniteLoop: true, // スライドをループさせるかどうか hideControlOnEnd: false, // infiniteLoopがfalseの時、次または前にスライド要素が無い時にコントロールを非表示にする speed: 500, // スライドするスピード easing: null, // イージング jquery.easing.jsから使用 slideMargin: 0, // 余白 startSlide: 0, // 最初に表示するスライド randomStart: false, // 最初に表示するスライドをランダムに設定 captions: false, // キャプションの設定。画像のtitle属性を使用 ticker: false, // ニュースティッカーモード tickerHover: false, // マウスオーバーでティッカーを一時停止 adaptiveHeight: false, // スライダーの高さの自動調整 adaptiveHeightSpeed: 500, // adaptiveHeightがtrueの時、スライダーの高さの遷移時間 video: false, // jquery.fitvids.jsを読み込んでいる場合、videoをレスポンシブにする useCSS: true, // CSSアニメーションを使用する preloadImages: 'visible', // 画像読み込みのタイミング 'visible'最初に表示される画像のみ最初に読み込む, 'all'開始前に全ての画像を読み込む responsive: true, // レスポンシブ対応 slideZIndex: 50, wrapperClass: 'bx-wrapper', // TOUCH touchEnabled: true, // モバイルデバイスのタッチ、スワイプに反応 swipeThreshold: 50, // スワイプの最小の移動距離 oneToOneTouch: true, // スワイプ時に要素を移動させる preventDefaultSwipeX: true, preventDefaultSwipeY: false, // ACCESSIBILITY ariaLive: true, ariaHidden: true, // KEYBOARD keyboardEnabled: false, // PAGER pager: true, // ページ送りを有効化 pagerType: 'full', // ページ送りのタイプ pagerShortSeparator: ' / ', // pagerType: 'short'の時の区切り線 pagerSelector: null, // 指定した位置にページ送りを追加 buildPager: null, // ページ送りの各中身 pagerCustom: null, // ページ送りを自分で用意する // CONTROLS controls: true, // 前後のコントロールを表示 nextText: 'Next', // nextのテキストを指定 prevText: 'Prev', // prevのテキストを指定 nextSelector: null, // 「next」を自分で用意する場合にjQueryセレクタで指定 prevSelector: null, // 「prev」を自分で用意する場合にjQueryセレクタで指定 autoControls: false, // 自動スライドのコントロールを表示 startText: 'Start', // 自動スライドの「start」のテキストを指定 stopText: 'Stop', // 自動スライドの「stop」のテキストを指定 autoControlsCombine: false, // 自動スライド時に、停止した際にコントロールボタンの表示 autoControlsSelector: null, // 自動スライドのコントロールを自分で用意する場合にjQueryセレクタで指定 // AUTO auto: false, // 自動スライドの設定 pause: 4000, // 自動スライドの待ち時間 autoStart: true, // 読み込み後に自動スライドを開始 autoDirection: 'next', // 自動スライドの方向の設定 stopAutoOnClick: false, autoHover: false, // ホバー時に自動スライドを停止 autoDelay: 0, // 自動スライドを開始するまでの待ち時間 autoSlideForOnePage: false, // CAROUSEL minSlides: 1, // 一度に表示させる最小値 maxSlides: 1, // 一度に表示させる最大値 moveSlides: 0, // カルーセル表示の時に移動するスライド数 slideWidth: 0, // 各スライドの幅 shrinkItems: false, // CALLBACKS onSliderLoad: function() { return true; }, // スライダーが読み込まれた直後に実行 onSlideBefore: function() { return true; }, // スライドする直前に実行 onSlideAfter: function() { return true; }, // スライドした直後に実行 onSlideNext: function() { return true; }, // nextが実行される直前に実行 onSlidePrev: function() { return true; }, // prevが実行される直前に実行 onSliderResize: function() { return true; } }; |
以上です！ご覧いただきありがとうございました！！
