【Rails】slickを使ってスライド形式で画像を表示しよう！ #Rails

slickを利用して複数の画像をスライド形式で表示できる機能を実装します。
今回もレシピアプリを例に作成していきます。

完成イメージ

※今回は画像投稿機能が実装されている前提で話を進めていきます。
画像投稿機能については前回記事にしておりますのでそちらを参照してください。

slickとは

slickとはjQueryベースの、スライダーを作成するためのプラグインです。

slickの導入

まずはslickの公式サイトにアクセスし、「get it now」を選択します。

するとページ下部に遷移するので、そこに記載されているCDNのコードをコピーします。

コピーしたコードをapplication.html.erbに貼り付けます。

app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>Recipe</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

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

    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>  #追加
  </head>
#以下略

jQueryの導入

Bootstrapを導入している方は、すでにjQueryが導入されているので飛ばしてください。
Bootstrap導入についてはこちら

それではjQueryを導入していきましょう。

ターミナル

yarn add jquery

webpackの設定をします。

config/webpack/environment.js

const { environment } = require('@rails/webpacker')

//ここから
const webpack = require('webpack')
environment.plugins.append(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery'
  })
)
//ここまでを追加

module.exports = environment

jQueryを読み込ませます。

app/javascript/packs/application.js

//中略

require("@rails/ujs").start()
//require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("./preview")
require('jquery')  //追記

//以下略

以上でslick、jQueryの導入完了です。

スライドの実装

ビューファイルの編集

まずは、表示させたい画像をビューに表示させます。

app/views/recipes/show.html.erb


<div class="text-center">
  <div class="card recipe-card ">

　　#画像の表示
    <% @recipe.images.each do |image| %>
       <%= image_tag image, class: "card-img-top show-img" %>
    <% end %>

    <div class="card-body">
      <div class="recipe-name">
        <%= @recipe.title %>
      </div>
      <div class="recipe-content">
        カテゴリー: <span class="recipe-category"><%= @recipe.category.name %></span>
        所要時間: <span class="recipe-time"><%= @recipe.time_required.name %></span>
      </div>
      <hr>
      <p class="card-text">
        <div class="recipe-title">作り方</div>
        <div class="recipe-text d-flex justify-content-start">
          <%= safe_join(@recipe.text.split("\n"),tag(:br)) %>
        </div>
      </p>
    </div>
  </div>
</div>

このままだと、以下のようにただ画像を3枚縦に並べただけになります。

slick.jsの作成

slickを使用するためのJSファイルを作成します。

touch app/javascript/packs/slick.js

作成したslick.jsに以下のコードを貼り付けます。

app/javascript/packs/slick.js

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

slick.jsを読み込ませます。

app/javascript/packs/application.js

//中略

require("@rails/ujs").start()
//require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("./preview")
require('jquery')  
require("./slick") //追記

//以下略

そして、ビューファイルを以下のようにsliderのdiv要素でimage_tagを囲うよう再編集します。

app/views/recipes/show.html.erb

<div class="text-center">
  <div class="card recipe-card ">

    #sliderで囲う
    <div class="slider">
        <% @recipe.images.each do |image| %>
          <%= image_tag image, class: "card-img-top show-img" %>
        <% end %>
    </div>

    <div class="card-body">
      <div class="recipe-name">
        <%= @recipe.title %>
      </div>

#以下略

すると以下のようにスライドが実装できます。

slick.jsの編集

このままでは、上下のボタンが不格好なので表示させないようslick.jsを編集します。
ボタンの代わりに自動でスライドを再生させる記述をします。

app/javascript/packs/slick.js

$(function() {
  $('.slider').slick({
      arrows: false,  //ボタン非表示
      autoplay: true, //自動再生
      autoplaySpeed: 4000, //再生スピード
  });
});

以上で完成です。