【Rails】gem ‘bxslider-rails’ でスライドショーを作成する

bxslider rails
レスポンシブルでオプションも豊富なコンテンツ・スライダーの “bxSlider” が Ruby on Rails の gem でもありましたので使ってみました。

本記事ではあらかじめ Article モデルに 画像を格納する image カラムがあって、 数件データが入っていることを前提にすすめていきます。

bxSlider Rails
https://github.com/manfe/bxslider-rails

環境はこちらです

準備

Gemfile

app/assets/javascripts/application.js

app/assets/stylesheets/application.css.scss

Controllers

ここではシンプルに全件取得とします。

app/controllers/top_controller.rb

Views

ここでは each で 取り出された article の image と title を link_to do ~ end で囲っています。

app/views/top/index.html.erb

jQuery

ここでは適当な js ファイルを作成しています。こちらのオプションは本記事のサンプルとして動作させているものです。

app/assets/javascripts/bxslider.js

boxSlider オプション デフォルト値

以上です!ご覧いただきありがとうございました!!


投稿者:

Shuji

読書したり、プログラミングしたりしています。何かアウトプットできそうなものがあれば投稿していきたいと思います。