【Rails】slickでスライドショーを作成する

画像をスライドショーで表示したい！

イメージはこんな感じです。
GIFが乗りませんでしたので、画像で、、、。
絵の癖が強いのは気にしないでください。

画像が一定の間隔で流れていくイメージです。
自動で動いていきます。

そこで、slickというライブラリをCDNで読み込み、実装することとします。

実装

slickの読込

slickをCDNで読み込みます。

views/application.html.erb

...

  <!-- slick -->
    <!-- Add the slick-theme.css if you want default styling -->
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
    <!-- Add the slick-theme.css if you want default styling -->
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>
</head>

...
...

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

ビューを記述

今回は、人気画像をスライドショーにて表示したいので、@boards表示を以下のようにします。
以下のようにsliderクラスを付与します。
これは、のちにJSで操作するためのものです。

views/top/index.html.erb

<!-- sliderクラスはJSでの操作を適応するため -->
<div class="slider">
  <% @boards.each do |board| %>
  　　<p><%= image_tag board.board_image.url, class: 'slider-item rounded' %></p>
  <% end %>
</div>

JavaScriptを記述する。

こちらにさまざまなバリエーションが載っておりますので、参考にしてください。

javascript/src/slider.js

$(window).on('load resize', function(){
  var wid = window.innerWidth;
  if (wid >= 800) {
    $(document).ready(function(){
      $('.slider').slick({
        centerMode: true,
        slidesToShow: 3,
        arrows: false,
        autoplay: true,
        autoplaySpeed: 1500,
        speed: 700,
      });
    });
  } 
  else {
    $(document).ready(function(){
      $('.slider').slick({
        autoplay: true,
        autoplaySpeed: 1500,
        speed: 700,
      });
    });
  }
});

'data-turbolinks': falseを追記

このままではページ遷移した時に、スライドショーが動かない場合があります。
turbolinksに原因がある場合があります。
以下のように追記します。

views/application.html.erb

<!-- 'data-turbolinks': false追記 -->
<%= link_to 'Top', root_path, class: 'nav-link', 'data-turbolinks': false %>

※リロードしないとJSが効かない場合

※「リロードしないとJSが動かない！」という場合、以下で解決することが多いです。

• ターボリンクスが影響している
  上記記載

• ページ読み込み前にJSが実行されてしまっている。
  検証ツールのconsoleでエラーが出ていることが多いです。

// ページの読込が完了してから実行するようにする
window.addEventListener('load', () => {

...

});