[Rails,slick,JavaScript]slickを用いたスライドショーの作成

チーム開発で活用した技術をアウトプット投稿
## 目的
slickを用いて下記のようなスライドショーの作成
![スライドショー.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2950107/d04e514b-4731-1ede-58f0-43def9ce7727.gif)

## 開発環境
- Ruby 3.1.2
- Rails 6.1.7
- bootstrap併用

## 実装手順
### 1.slickの導入
今回はCDNを用いて実装

https://kenwheeler.github.io/slick/

公式HPのヘッダー`get it now`をクリックし
`View On Github`からgithubに移動し、`README`にある以下3つをコピー
```
<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>
```
`app/views/layouts/application.html`に以下のように貼り付ける
```application.html
<html>
  <head>
    <!--省略-->
    <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <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"/> <!--追加-->
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> <!--追加-->
  </head>
 <!--省略-->
```

### 2.viewページの記述
スライドショーを配置したい場所に以下のように記述
`li`内に画像が入る形になる
```app/views/public/top.html.erb
<div class="top_slide text-center">
  <ul class="p-0 slider">
    <li class="slider-item slider-item01"></li>
    <li class="slider-item slider-item02"></li>
    <li class="slider-item slider-item03"></li>
  </ul>
  <p class="top_text">
    <span>ようこそ！</span><br>
    このサイトは、ケーキ販売のECサイトになります。<br>
  </p>
</div>
```
### 3.CSSの設定
今回はbootstrap併用のため
`app/javascript/stylesheets`の中に`product.css`を作成
`app/javascript/packs/application`内に以下を記述
```application.js
import "../stylesheets/product.css"
```
これでproduct.cssが読み込まれるようになるのでスライドショーの記述を行う
```product.css
/*スライダー処理*/
.slider {
  position:relative;
  z-index: 1; /*z-index を持つ要素はより小さな要素の上に重なる*/
}

.slider-item {
    width: 100vh;/*各スライダーの幅、.sliderの横幅一杯の100%を指定*/
    height: 400px;/*各スライダーの高さ、.sliderと同じ高さに指定*/
    background-repeat: no-repeat;/*背景画像をリピートしない*/
    background-position: center;/*背景画像の位置を中央に*/
    background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
}
.slider-item01 {
  background: url("../../assets/images/top1_image.png");/*背景画像のパスを指定*/
  background-size:  cover;
}

.slider-item02 {
  background-image: url(../../assets/images/top2_image.png);
  background-size:  cover;
}

.slider-item03 {
  background-image: url(../../assets/images/top3_image.png);
  background-size:  cover;
}


.top_text{
  position: absolute;
  color: white; /*文字の色*/
  z-index: 2; /*z-index を持つ要素はより小さな要素の上に重なる*/
  top: 10%; /*上からの配置位置*/
  left: 40%; /*左からの配置位置*/
  -webkit-transform: translate(-30%, 0%);
  text-shadow: 2px 2px 5px black; /*文字の影等の処理*/
  text-align: center;
  font-size: 20px; /*文字のサイズ*/
  letter-spacing: 0.1em; /*文字の感覚*/
}

.top_text span{
  font-weight: bold; /*太文字に*/
  font-size: 34px;
  vertical-align: bottom;
}
```
### 4.JavaScripyの記述
最後にスライドショーを表示させるページにJavaScriptを埋め込む
今回はTopページに表示したいため`app/views/public/top.html.erb`に記述

```.js
<script>
  $('.slider').slick({
  autoplay: true,//自動的に動き出すか
  autoplaySpeed: 3000,//次のスライドに切り替わる待ち時間
  speed: 1500,//スライドの動きのスピード
  infinite: true,//スライドをループさせるか
  slidesToShow: 1,//スライドを画面に3枚見せる
  slidesToScroll: 1,//1回のスクロールで3枚の写真を移動して見せる
  arrows: false,//画像移動用の矢印の表示
  dots: true,//下部ドットナビゲーションの表示
  });
</script>
```
以上で完成！

## 問題点
スライドが一枚目に戻った時に、一瞬白いフラッシュのようなものが入る事がある
現状、解決方法が見つからないが、解決できたら更新予定

## 参考

https://kenwheeler.github.io/slick/

https://toshpit.com/rails-carousel-slick-init/