スライダー実装時にslick以外の手段も手段も検討したのですが、その中でもslickが１番使い勝手がよさそうだったので、slickに決めました。
なので今回は、jQueryのプラグインであるslickを使って、カルーセルスライダー（スライドショー）の実装をしていきます。
デモはslickの公式サイトか、ぼくのポートフォリオで、確認してみてください。
#開発環境
ruby 2.6.3
Rails 5.2.6
#前提
- jQueryが使える状態
- FontAwesomeが使える状態
- 使用する画像は各自用意して、assets/imeges直下に配置してください
- homes/topで実装
####スライダーの仕様
スライダーは自動で切り替え、手動で切り替え、両方できるように実装していきます。
- 自動で画像が切り替わる
- 矢印クリックで、画像切り替え
- 下のドットクリックで、その画像に切り替え
以上前提をふまえていってみましょう！
#手順
スライダーを実装する手順は4ステップです！
- slickのダウンロード
- ビュー
- jsで動きをつける
- カスタマイズする
#slickのダウンロード
まずはslickをダウンロードするところからはじめていきます！
slickの公式サイトからダウンロードしてきます。
上部メニューのget it nowをクリックするとダウンロードの画面に切り替わります。
Download Nowをクリックしてslickフォルダをダウンロードします。
slickフォルダ内の３つのファイルを使用します。
①slick-theme.scss
②slick.scss
③slick.min.js
拡張子が違うファイルも入っていますので、注意してください。
####ファイルをRailsアプリに格納する
ファイルによって格納する場所が違うので、ご注意ください
①slick-theme.scss
②slick.scss
は、
app/assets/stylesheetsに格納
③slick.min.js
は、
app/assets/javascriptsに格納
####読み込みの準備
slickファイルを読み込む準備をしていきます。
下のコード部分をコピーしてviews/layouts/application.erbのhead内で読み込んでいきます。
<head>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<!--slickの読み込み-->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
</head>
scssの読み込みも忘れずにやっておきます。
@import "slick-theme";
@import "slick";
#ビュー
スライダーさせたい画像を配置します。
<!--スライドショー-->
<div class="slick">
<div>
<%= image_tag 'image1.jpg', class:'col' %>
</div>
<div>
<%= image_tag 'image2.jpg', class:'col' %>
</div>
<div>
<%= image_tag 'image3.jpg', class:'col' %>
</div>
</div>
#jsで動きをつける
jsでスライダーの基本機能、オプションで自動再生とスライダー下にドットを表示します。
// スライドショー
// Turbolinks無効化(詳しくは過去記事参照)
$(document).on('turbolinks:load', function(){
$('.slick').slick({
// 自動再生
autoplay:true,
// ドットの表示
dots:true
});
});
Turbolinksに関する記事はこちら
[Rails]リロードしないとJavaScript(jQuery)が動かない問題
これで、スライダーとしての基本的な機能はできています。（いや〜、プラグイン最高！）
ドットはかなり小さいので、見つけられるか探してみてください。
探したときにちょっとした感動がありますｗｗ
#カスタマイズする
ただこのままでは、矢印がなかったり、ドットもかなり小さいのでカスタマイズしていきます。
カスタマイズはどんなスライダーを実装したいかによって、変わってくるので、あくまで今回は一例としてお考えください。
####矢印の表示
矢印は、FontAwesomeを使っていきます。
jsファイルに追加していきます。
// スライドショー
$(document).on('turbolinks:load', function(){
$('.slick').slick({
autoplay:true,
// 行末に , を追加しました
dots:true,
// 左右の切り替えボタン
prevArrow: '<i class="fas fa-angle-left"></i>',
nextArrow: '<i class="fas fa-angle-right"></i>'
});
});
場所はめちゃくちゃですが、矢印ボタンが表示できて、クリックすることで、切り替えできることも確認できました。
####矢印とドット調整
矢印とドットの表示位置とデザインの調整を行っていくので、CSSファイルに記述していきます。
// スライドショーの矢印デザイン
.fa-angle-left {
font-size: 50px;
// 絶対配置から位置を決める
position: absolute;
z-index: 100;
left: 30px;
top: 230px;
color: gray;
}
.fa-angle-right {
font-size: 50px;
// 絶対配置から位置を決める
position: absolute;
z-index: 100;
right: 30px;
top: 230px;
color: gray;
}
// ドットのデザイン
.slick-dots{
color: rgb(116, 116, 116);
font-size: 50px;
}
これで完了！
といいたいところなんですが、ドットのデザインが反映されません。
なぜかというと、slickの公式サイトからダウンロードしたファイルのドットのフォントサイズの設定を変更しないとだめなようです。
19行目が$slick-dot-size: 50px !default;と記載があります。
つまり、ドットのサイズはデフォルトで６ｐｘになっています。
ここを編集していきます。
// デフォルトのサイズを変更
$slick-dot-size: 50px !default;
これで、完成です！
#まとめ
スライダーを実装する手順は4ステップです！
- slickのダウンロード
- ビュー
- jsで動きをつける
- カスタマイズする
最後のダウンロードしたファイルをいじっていくのは、盲点でした。
なぜ、反映されないんだーって何回サーバー再起動したことか・・・
自力で気づけてよかったです。
slickのGitHubに他にもいろんなオプション等のってるので、参考にしてみてください。
最後まで見ていただきありがとうございました。