【Rails】簡単に画像スライド実装！slick導入解説

実装イメージ

事前準備

公式からファイルをダウンロード

https://kenwheeler.github.io/slick/ にアクセスし、以下の「Download Now」からプログラムファイルをダウンロードします。

ダウンロードされたフォルダ構成

ダウンロードされたファイルの中を見てみると、以下のような感じのフォルダ構成になっていると思います。

このうち、実際に自分のプロジェクトに移して使用するのは、以下の５つです。

ダウンロードファイルそれぞれの配置

自分のプロジェクトにおける適切なフォルダに、先ほどの５つのファイルをコピーします。
それぞれのコピー先は以下の通りです。

app/assets/

fontsのフォルダまるごと

app/assets/images

ajax-loader.gif

app/assets/javascripts

slick.min.js

app/assets/stylesheets

slick.scss
slick-theme.scss

画面に組み込む

今回は、aboutページにカルーセルを導入する例をご紹介します。

HTML側を編集

まずはカルーセルを表示するためのタグを用意します。
aboutページのファイルに以下のタグを追加します。

<div class="slicker">
  <div>
    <%= image_tag 'book-1.jpg', class:'ab-slick' %>
  </div>
  <div>
    <%= image_tag 'book-2.jpg', class:'ab-slick' %>
  </div>
  <div>
    <%= image_tag 'book-3.jpg', class:'ab-slick' %>
  </div>
</div>

ここでは３つの画像をカルーセルとして採用していますが、いくつでも指定することが可能なので好きな数やってみてください。

使用する画像ファイルは、あらかじめ app/assets/images のフォルダに入れておきます。

javascript側を編集

次にカルーセルが動作するように js のコードを追加していきます。

jsのコードを追加する場所は任意なので、application.js などに記載してもいいですし、about.html.erb に <script> タグで記載する方法もあります。（どっちでも大丈夫です）

$(document).on('turbolinks:load', function(){
  $('.slicker').slick({
    autoplay:true, // 自動再生
    autoplaySpeed: 3000 // 再生速度（ミリ秒）
  });
});

$(‘.slicker’) の部分は、html側の div タグの class で指定した値（class=”slicker”）と合わせてあげるのがミソです。

この状態で画面を確認してみると、カルーセルが動作し、３秒おきに画像が自動で変化しているのが確認できると思います！

デザインのカスタマイズ

ここで解説を終わると少し物足りないので、デザインのカスタマイズ方法を少しだけ解説しておきます。

ドットの表示

jsのコードの部分を以下のように変更します。

$(document).on('turbolinks:load', function(){
  $('.slick').slick({
    autoplay:true,
    autoplaySpeed: 3000,
    dots:true, // ドットの表示  （この行を追加）
  });
});

この変更だけで画像の下側にドットが出るようになったと思います。

しかし、cssのデフォルトの設定ではドットが小さすぎて見えなかったり、背景色が黒で同化してしまって見えないこともあります。

なので、slick導入時に入れたファイルのうち、slick-theme.scssのファイルを少し変更します。
“$”（ドルマーク）で始まってるものが、css上の変数なので、これを変えてあげることでデザインを簡単に変更することができます。

今回で言えば、変更したのは以下の２つの変数のみです。

$slick-dot-color: gray !default;
$slick-dot-size: 8px !default;

まとめ

slick を用いてカルーセルを簡単に実装する方法を解説しました！

手順をざっくりまとめると以下のような流れです。

公式サイトには、色々なカスタマイズ例が載っているので試してみてください。