スライドショーの実装

題名通り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で表示させています。

スライドを自動にしてみよう

現状のスライドだと寂しいので色々オプションを付け加えてみましょう。