railsでアプリケーション作成15(スライドショー)

Table of Contents

準備
表示

準備

application.html.erbに以下を追加。

<head>
 <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>

application.jsでコメントアウトする

//Turbolinks.start()

app/javascript/packsの中にjsファイルを作成。

$(function () {
  $(".slider").slick({
    variableWidth: true,
    adaptiveHeight: true,
    centerMode: true,
    focusOnSelect: true,
    arrows: false,
    autoplay: true,
    autoplaySpeed: 2000,
  });
});

表示

controllerのアクションに以下を追加。

## 投稿順に取得
@slide = モデル.order(create_at: :desc).limit(取得数)

view

<div class="slider">
  <% @slide.each do |s| %>
    <p><%= image_tag s.投稿データ, class: 'slider-item rounded' %></p>
  <% end %> 
</div>