Railsで画像スライドのためのslickを使う。（hamlで記述）

#　Railsでslickを使う。
画像のスライドをしようと思った時に便利なslick。
それをRailsで使ったので備忘録。
まずslickを使うにはjqueryのgemをインストールする必要がある。
Gemfileに

gem 'jquery-rails'

と記述してbundle installすればOK。
そしてassets/javascripts/application.jsに

//= require jquery
//= require jquery_ujs

と記述する。
turbolinksが入った状態だとうまく動作しない可能性があるので

//= require turbolinks

の記述は削除しておく。

そしてslickのサイトにアクセスしてget it now。
CDN用のCSSとJSをコピーする。
http://kenwheeler.github.io/slick/

CSS

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>

JS

<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

それをapplication.html.hamlに記述する。記述する順番を間違えるとうまく動作しないことがある。

!!!
%html
  %head
    %title Something
    %meta{charset: "utf-8"}
    = csrf_meta_tags
    = stylesheet_link_tag    'application', media: 'all', data:{ turbolinks:{ track: true }}
    %link{ rel: "stylesheet", type: "text/css", href: "//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"}
    = javascript_include_tag 'application', data: { turbolinks: { track: true }}
    %script{ type: "text/javascript", src: "//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"}


  %body
    = yield

%linkや%scriptの{}の中身はハッシュロケット（=>）を使わずにシンボル（:）を使って記述した方がいいっぽい。

まあこのままでも一応使えるっぽいけど念の為にslickのサイトからファイルをダウンロードしておいたほうがいいかも。
（画像スライドの際のドットやアローなどのスタイルが記述されている）
get it nowのDownload　Nowからダウンロード可能。
その中で必要そうなファイルだけをRailsの中に移した。
僕はslick-theme.cssだけstylesheetsの中に移行した。

そしてビューファイルでslickを使う。

%ul.slider
  %li
     = image_tag 
  %li
     = image_tag 
  %li
     = image_tag 

のように親要素にsliderというクラスをつける。
そしてJSファイルに

$(function() {
  $('.slider').slick();
});

と記述すればとりあえずslickが機能していると思う。

使用したオプション

・ドット
・アローをfontawesomeのものに変更
・自動スライド
・ドットをhoverするだけで画像スライド

$(function() {
  $('.slider').slick({
      prevArrow:'<i class="fa fa-angle-left arrow arrow-left"></i>',
      nextArrow:'<i class="fa fa-angle-right arrow arrow-right"></i>',
      dots: true,
      autoplay: true,
      autoplaySpeed: 4000,
      speed: 800
  });

  $('.slick-dots li').on('mouseover', function() {
    $('.slider').slick('goTo', $(this).index());
  });
});

.slick-dots {
        position: absolute !important;
        bottom: 20px !important;
        li {
          font-size: 20px !important;
          button:before {
            content: "●" !important;
            font-size: 14px !important;
            color: rgb(60, 60, 60) !important;
          }
        }
      }

ドットを設定するとslick-dotsというクラスのついたulが生成され、その中のliの中のbuttonにドットが入っている。
slickの元から設定されているスタイルに対抗するために!importantを使っている。

slickのオプションをもっと知りたければたくさん載っている記事があるのでそちらを参照ください。
（こちらの記事など）
https://qiita.com/katsunory/items/25b385aae0f07b41e611
https://qiita.com/ymeeto/items/7fc56eea4bd44487cdb7

僕が使用したのはこのぐらい。

至らぬ点があればぜひコメントで教えてください。