これまでに作った機能について簡単にまとめていく。

今回は、

カルーセルの作成

前提条件

Rails5系を使用していること

jQueryが導入されていること
画像の複数投稿ができること
画像の複数投稿はこちら

使用モデル

Blogモデル

  カラム データ型
1 title string
2 content text
3 images string

slickの導入

今回はCDNを使用
こちらより以下を導入
slick.min.css
slick-theme.min.css
slick.js

app/views/layouts/application.html.erb

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script>

カルーセルの導入

    
  <% @blog.images.each do |image| %>
    
  • 
      <%= image_tag (image.url) if image.url%>
    
    • 
  <% end %>

app/assets/javascripts/blog.js

$(document).on('turbolinks:load', function(){
  $('.carousel').slick({
     arrows: true,
     infinite: false,
     dots: true,
   });
});

指定するオプションはこちらより適宜選択

以上で作成完了