スライドショーの実装
題名通りjQueryのslickを用いて投稿された画像をランダムにスライドショーで実装する方法の紹介です。
初投稿なので誤字や脱字など至らない点はあると思いますが、よろしくお願いいたします。
完成形
##前提
Rails 6.0.3.5
slickはjQueryのプラグインなのでjQueryの導入をお願いいたします。
slickの導入
slick公式サイト
CDNを利用して導入します。
application.html.erb内の<head>に
apprication.erb
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
を付け加えましょう。
導入に関してはこれだけです。
slick.jsの作成
javascript下にslick.jsファイルを作りましょう。
コードの記載は下の通りです。
slick.js
$(function() {
$('.slider').slick();
});
slickの読み込み
slickを読み込むためにapplication.jsに
application.js
require('slick')
の記載を追加しましょう。
投稿を取得してスライドショーにしよう
スライドショーを実地するための記載をしましょう。
今回の場合は@postsに画像つきの投稿の全てを取得させています。
html.erb
<div class="slider">
<% @posts.each do |post| %>
<%= link_to image_tag(post.image), post_path(post.id), method: :get, class: :slick_image %>
<% end %>
</div>
これで投稿を取得して画像をスライドショーで表示できるようになったと思います。
取得する投稿をランダムにしよう
↑の場合だと投稿全てを取得して表示してしまうので、
コントローラー内で新たに@randamsを定義してランダムな投稿を取得しましょう。
controller.rb
＠randams = Post.order("RAND()").limit(5) //limit(5)で５件を取得させている。
@randamsにランダムな投稿５件を取得させています。
ビューファイルも書き換えましょう。
.html.erb
<div class="slider">
<% @randams.each do |randam| %>
<%= link_to image_tag(randam.image), post_path(randam.id), method: :get %>
<% end %>
</div>
@randamsにランダムな投稿５件を取得させてeachで表示させています。
スライドを自動にしてみよう
現状のスライドだと寂しいので色々オプションを付け加えてみましょう。
slick.js
$(function() {
$('.slider').slick({
centerMode: true, //スライド画面に次のスライドが表示される
centerPadding: '10%', //次のスライドの幅
dots: true, //スライドの下にドットのナビゲーションを表示
autoplay: true, //自動再生オン
autoplaySpeed: 2000, //再生スピード
infinite: true //スライドが終了したら最初に戻る
});
});
他にもさまざまなオプションがあるので気になった方は公式リファレンスをチェック！
最後に
初投稿と言うこともあり、色々不十分な点もあると思いますが、拙い文章にお付き合いいただきありがとうございました。