flexsliderでスライドショーを実装する
こちらもスクールでのチーム開発で使用したスライドショーの実装手順を書いておこうと思います。
下の画像（※食べログ本家の画像）のようなサムネイル画像つきのスライドショーを実装したかったので、色々調べたところ、flexsliderというjQueryのプラグインで簡単に実装できる！
というのがあったので、そちらを使って実装してみました。が、意外とJSファイルやらCSSの調整など苦労したのであくまで私のケースですが、手順を書き残しておきます。
手順
1. FlexsliderのダウンロードページからFlexsliderのプラグイン一式zipファイルをダウンロードする。
2. application.html.hamlのhead部分にflexsliderのプラグインを読み込む記述をする。
3. app/assets/javascripts にflexslider.js というファイルを新たに作り、編集する。
4. view ファイルを編集する。
5. CSSファイルを編集してviewを整える。
2. application.html.hamlのhead部分にflexsliderのプラグインを読み込む記述をする。
こちらにあるURLを拝借して、CDN上のJavascriptを読み込めるようにしてあげる。
app/views/layouts/application.html.haml
%head
%script{src: "https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.7.1/jquery.flexslider.min.js", rel: "stylesheet"}
3. app/assets/javascripts にflexslider.js というファイルを新たに作り、編集する。
app/assets/javascripts/flexslider.js
$(window).on('load', function() { $('#slider').flexslider({ animation: "fade", prevText: "◀", nextText: "▶", controlsConatiner: '.flexslider-controls', manualControls: ".thumb li", }); });
4. view ファイルを編集する。
app/views/shops/show.html.haml
#slider.flexslider %ul.slides %li = image_tag @shop.pic1.url if @shop.pic1.present? %li = image_tag @shop.pic2.url if @shop.pic2.present? %li = image_tag @shop.pic3.url if @shop.pic3.present? %li = image_tag @shop.pic4.url if @shop.pic4.present? %li = image_tag @shop.pic5.url if @shop.pic5.present? .flexslider-controls %ul.thumb %li = image_tag @shop.pic1.url if @shop.pic1.present? %li = image_tag @shop.pic2.url if @shop.pic2.present? %li = image_tag @shop.pic3.url if @shop.pic3.present? %li = image_tag @shop.pic4.url if @shop.pic4.present? %li = image_tag @shop.pic5.url if @shop.pic5.present?
※「image_tag @shop.pic1.url 」の＠shopはshopsコントローラで該当店舗のレコードを取得してインスタンス変数に代入したもののうち、pic1カラムに入っている画像データを取り出しています。「if @shop.pic1.present?」でデータが存在している時のみ表示させています。
