【Rails6】カルーセルデザインを簡単に実装できる「slick」の導入手順について解説

今回はカルーセルデザインを簡単に実装できるjQueryのプラグイン「slick(スリック)」について解説したいと思います。カルーセルパネルを導入することで一気にサイトクオリティが上がるため、サイトデザインの1つの候補として検討していただけたらと思います。

カルーセルを導入することでデスクトップサイトのCV率が低下してしまうけど、スマホのCV率は大幅に向上するというデータがあるらしいよ。

この記事の内容

カルーセルとは
slickとは
slickの導入手順
slickの実装手順
カルーセルをデザイン
- デザインパターン①
- デザインパターン②
まとめ
参考記事

カルーセルとは

カルーセルとは、画像や動画コンテンツを横にスライドさせて表示するWebデザインの一種です。最近はあまり目にしなくなりましたが、一時期数多くの企業がカルーセルデザインを使用していました。

カルーセルパネルとは、Webデザインの一種で、画像などのコンテンツをスムーズに横にスライドさせる表示方法のことである。
カルーセルパネルを利用することで、狭いエリアに複数のコンテンツを表示させることができる。主にJavaScriptとCSSの組み合わせてなどによって実現される。
カルーセルパネルの「カルーセル」（carousel）は「回転木馬」を意味する英語である。
参照：IT用語辞典ーカルーセルパネル

具体例でいうと、「koe donuts」や「GIRL HOUYHNHNM」といったサイトがカルーセルデザインを導入しています。

koe donuts

GIRL HOUYHNHNM

カルーセルデザインはどういったものなのか、実際にサイトにアクセスして確かめてみてください。

【もっとカルーセルデザインが見てみたいという方はこちら】
SANKOU!：https://sankoudesign.com/category/slide/

slickとは

slickとは、先ほど紹介したカルーセルデザインを簡単に実装できるjQueryのプラグインです。カルーセル導入の定番として数多く用いられています。

slick導入の最大のメリットとしては、自動でレスポンシブに対応してくれる点が挙げられます。

slick公式サイト：http://kenwheeler.github.io/slick/

slickの導入手順

ではここから実際にslickの導入手順について解説したいと思います。

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

slick公式サイト：http://kenwheeler.github.io/slick/

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

以下のように、コピーしたコードを「application.html.erb」に貼り付けましょう。

<!DOCTYPE html>
<html>
  <head>
    <title>Furibo</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_link_tag 'application', media: 'all', '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>

貼り付ける位置を間違えないよう注意してください。

たったこれだけの作業でslickを導入することができます。

次の項目では実際にslickを使ってカルーセルを実装していきましょう。

slickの実装手順

jQueryの導入

slickはjQueryプラグインですので、大前提としてjQueryが入っている必要があります。

以下の記事を参考にjQueryをアプリケーションに導入しましょう。

【Rails6】Webpackerを用いてjQueryをインストールする手順を簡単にまとめてみたRails6系でjQueryを導入する手順を簡単に解説しています。Rails5系まではアセットパイプラインを使用してJavaScriptを管理していましたが、Rails6.0系以降はWebpackerと呼ばれる機能で管理することになっています。...

今回はRails6.0系でアプリケーションを作成しているため、Webpackerを用いてjQueryをインストールしています。Rails5系ではgemを用いてjQueryをインストールする必要があります。

画像の配置

今回は3枚の画像をスライド形式で表示します。

フリー画像を3枚用意し、assets/images以下に配置しましょう。

画像の表示

では先ほど用意した画像をブラウザ上で表示させましょう。

画像を表示したいビューファイルに以下の記述を追記してください。

<div class="previews">
  <div class="slider">
      <%= image_tag 'home-image' %>
      <%= image_tag 'sample' %>
      <%= image_tag 'sample2' %>
  </div>
</div>

すると、バラバラではありますが画像が3枚表示されます。

今回は画像サイズが大きいため、縦に並んでしまっています。

slick.jsの作成

続いてslickを使用するためのJSファイルを作成しましょう。

javascripts以下に「slick.js」を作成し、以下のコードを貼り付けてください。

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

簡単ではありますが、これで簡単なカルーセルを実装することができました。

自動スライド機能はまだなく、PCのマウスポインタ、もしくはページ上部にある「Previousボタン」、ページ下部にある「Nextボタン」で画像をスライドさせることができます。

カルーセルをデザイン

カルーセル機能自体は実装できましたが、今のままではだいぶ不恰好です。

次はデザインを調整し、もう少しおしゃれなカルーセルスライドを実装しましょう。

再度slickの公式サイトにアクセスし、「Download Now」を選択してください。

slick公式サイト：http://kenwheeler.github.io/slick/

ダウンロードしたzipファイルを解凍し、その中身を確認しましょう。

以下のようなファイル構成になっており、デザインの調整には赤枠で囲った3つのファイルを使用します。

今回は最低限のカルーセルスライドを作成しますが、slickが持つ公式テンプレートを使用したい場合は残りのファイルも配置する必要があります。

「slick.scss」と「slick-theme.scss」は「app/assets/stylesheets」に、「slick.min.js」は「app/javascript」に配置しましょう。

scssを配置したのでそれらが読み込まれるように「application.scss」に以下の記述を追記します。

@import "slick-theme";
@import "slick";

デフォルトでは「application.css」になっているため、ご自身で「application.scss」に名前を変更しましょう。

画像サイズがバラバラ、かつサイズが大きすぎるのでCSSで整えてあげます。

ここに関しては、個人の好みや画像の大きさによってCSSの実装方法が変わるため今回は省略します。

僕の場合は以下のように画像を中央に寄せ、ボーダーを付けて画像が分かりやすくなるよう実装しました。

デザインパターン①

もう一工夫加えてみましょう。

現在の場合、マウスポインタでしか画像を動かすことができません。

矢印をクリックすることでも画像をスライドできるような実装をしましょう。

イメージはこんな感じです。

矢印のアイコンにはFontAwesomeを使用します。

以下の記事を参考にFontAwesomeが使用できるよう設定してください。

【Rails】Rails6でFontAwesomeを導入・表示させるための手順を初心者向けに解説Rails6でFontAwesomeを導入・表示させる手順について初心者向けに解説しています。Rails6ではWebpackerというパッケージを使用することにより、以前よりグッと簡単にFontAwesomeを導入することができるようになりました。ぜひこの機会に導入を検討してみてください。...

FontAwesome：https://fontawesome.com/

FontAwesomeの導入に関して、1つ注意点があります。

それは「application.js」の以下の記述をコメントアウトすることです。

// application.jsの冒頭に以下の記述を追記

import '@fortawesome/fontawesome-free/js/all';

こちらの記述はJavaScriptで使用できるFontAwesomeのパッケージをインストールしていますが、この記述があるとアイコンによるスライド移動ができなくなってしまいます。

僕の場合、これで数時間詰まりました。

では矢印のアイコンが表示されるよう「slick.js」を編集しましょう。

$(function() {
  $('.slider').slick({
    prevArrow: '<i class="fas fa-arrow-alt-circle-left"></i>',
    nextArrow: '<i class="fas fa-arrow-alt-circle-right"></i>'
  })
});

prevArrowは戻るボタンのHTML指定、nextArrowは進むボタンのHTMLを指定しています。

これで2つのアイコンが表示されました。

実際にこのアイコンをクリックすることで画像がスライド移動されるはずです。

あとはCSSを整え、アイコンのデザインを調整します。

.fa-arrow-alt-circle-left {
  font-size: 50px;
  position: absolute;
  z-index: 100;
  left: -100px;
  top: 300px;
}

.fa-arrow-alt-circle-right {
  font-size: 50px;
  position: absolute;
  z-index: 100;
  right: -100px;
  top: 300px
}

これで下記のようなカルーセルスライドが実装できました。

デザインパターン②

さらにもう一工夫加えてみます。

現在は手動でしか画像をスライドさせることができません。

次は自動で画像がスライドされる機能を実装していきましょう。

「slick.js」に以下の一行を追記します。

$(function() {
  $('.slider').slick({
    prevArrow: '<i class="fas fa-arrow-alt-circle-left"></i>',
    nextArrow: '<i class="fas fa-arrow-alt-circle-right"></i>',

    // 以下の1行を追記
    autoplay:true
  })
});

たったこれだけで、画像が自動でスライドされるようになります