【Rails】slick使ってスライドショーに挑戦してみたので作り方を簡単に書いていきます

ホームページのトップページでよく見るスライドショーを作ってみました！

JavaScriptとjQueryを使います！

①【jQuery】を導入します

Gemfileに下記を記述

Gemfile

gem 'jquery-rails'

ターミナルに戻ってインストール

1. bundle install

jQueryとは？

JavaScriptで出来ることをコンパクトにまとめたものです。

例えば、今回のスライドショーやクリックしたら画像が変わったりJavaScriptだと
書くのに時間がかかりますが、jQueryを使えば簡単に記述できてしまいます

②htmlへ記述

application.html.erbへ下記の3種類を記述します。

view/layouts/application.html.erb

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

③viewページへ記述(画像を付ける)

表示させたい画像をviewページへ記述
https://〇〇〇ではない場合は、assets/を記述しないと画像が表示されません

html.erb

<div class="slider">
  <div class="slider-img">
    <img src="assets/〇〇〇.jpg" />
  </div>
  <div class="slider-img">
    <img src="assets/〇〇〇.jpg" />
  </div>
  <div class="slider-img">
    <img src="assets/〇〇〇.jpg" />
  </div>
</div>

④javascriptへ記述

下記の内容を記述する

app/javascript/packs/application.js


//= require jquery　 　　　　　　　　　
//= require jquery_ujs　　　　　　　　 

$(function () {
  $(".slider").slick({
    arrows: false,
    autoplay: true,
    adaptiveHeight: true,
    dots: true,
  });
});

※注意
//= require jquery　　　　　　　　　　
//= require jquery_ujs
この二つも忘れず記述してください！

⑤CSSへ記述

下記のような感じで記述してください！
中身は自分の好きなようにカスタムしてください

app/assets/stylesheets/application.css


.slider {
  width: 90%;
  margin: 0 auto;
  height: 500px;
}
.slider-img img {
  width: 90%;
  margin: 0 auto;
  height: 500px;
}

これでスライドショーが完成すると思います！
抜けがあったら申し訳ございません...

silckスライドショー