Zenn
💭

slickを使用してスライド機能を実装

に公開
JavaScript
Rails
tech

はじめに

topページにサイトの利用方法をわかりやすく表示するためにスライド機能を実装しました。
公式HPがあり、また記事がたくさんあったので実装しやすかったです。
slick公式サイト：
http://kenwheeler.github.io/slick/

slickの導入

HPに記載されているCDNのコードをコピーして「application.html.erb」に貼り付けましょう。

application.html.erb
<%= 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>

画像の配置と表示

assets/images以下に使用する画像を配置します。
また画像を表示したいビューファイルに以下の記述を追記してください。

top.html.erb
<div class="previews">
    <h3 class="ml-5 my-4"><使用方法></h3>
  <div class="slider">
    <%= image_tag 'calendar' %>
    <%= image_tag 'post_record_new_sample' %>
    <%= image_tag 'post_records' %>
    <%= image_tag 'post_record_show' %>
  </div>
</div>

この段階ではまだそれぞれの画像が縦並びになっている状態です。

slick.jsの作成

次にjsファイルを作成して編集していきます。
javascripts以下に「slick.js」を作成し、以下のコードを貼り付けてください。
もしくはapplication.jsへの記入でも大丈夫です。

/*global $*/
$(function() {
  $('.slider').slick({
  })
});

/*global $*/

この記述がないと以下のような表示になってしまうので注意です。

問題がなければ簡単なスライドができているはずです。

カルーセルをデザイン

公式HPからファイルをダウンロードします。サイト上部にDOWLOADNOWと表示があるのでそこをクリックすればできます。
今回は簡単な変更だけ行うので、「slick.scss」と「slick-theme.scss」は「app/assets/stylesheets」に、「slick.min.js」は「app/javascript」に配置しましょう。
scssを配置したのでそれらが読み込まれるように「application.scss」に以下の記述を追記します。

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

今回はスライド変更ボタンをFontawemeで変更しました。
では矢印のアイコンが表示されるよう「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>'
  })
});

これではボタンが小さいままなので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」に以下の一行を追記します。

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
  })
});

これで自動再生がされます。
これ以外にもいろいろな追加機能があるみたいなので時間ができたら調べてみようと思います。

エラー例

他のページから移動するとviewが崩れてしまうが、リロードをすれば治るエラーが発生しました。
原因はturolinksが動作しているためそもそも$(function() { $('.slider').slickが動かないからだった。

$(document).on('turbolinks:load', function() {})

この記述をjsファイルに追記することで、エラーを解消できます。

参考にさせていただいた記事

https://techtechmedia.com/slick-raills/
https://qiita.com/hiroyayamamo/items/b258acbaa089d9482c8a

Discussion