slick.js スライダーの使い方を解説。JavaScript初心者が実装しました！

# Webデザイナー歴1．5年で、やっとJavaScriptに手を出す
Webデザイナーになって、1年を過ぎた頃から、JavaScript使えるようにしないとな〜、と思いつつ、なかなか手が出せませんでした。
ただ漠然と**難しそう・・・**　という先入観があったからです。

やらないとと思いつつ、のほほんと過ごしていた、そんなある日、試練はやってきました・・・。
業務でJavaScriptを使わざるを得ない状況になったのです:sweat:。
その試練とは、、、

**「バナーをスライダーで表示させる」**　というもの。

慣れている人は簡単でしょう。
ですが、初心者には、難しいんですよね。

ということで、どうやって私がスライダーを表示させたのか、その経緯をまとめます。:pencil:

## まず最初に何をしたか
とりあえず、参考サイトを探しまくりました。:desktop:
検索キーワードは、

:::note info
* JavaScript初心者
* JavaScript　スライダー
* バナー　切り替わり
:::

分からなかったら調べるのは、まず大事です。

## 次に何をしたか
検索した結果、どうやら、スライダーを使ったJavaScriptは、下記のサイトがまず重要らしい。ということが分かりました。

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

この公式サイトは、slick.jsというもので、
**「slickはjQueryベースの、スライダーを作成するためのプラグイン:electric_plug:」** だそうです。
この説明自体、なんか難しい。
なので簡単に自分の言葉で翻訳してみることにしました。

まず、slickとは、日本語訳で「滑らか、あるいはスムーズにする。」という意味があるみたいです。
ここでちょっと脱線しますが、**「slick」の「sl」自体に「滑る」系の意味があるみたいです**。
slip（スリップ）、とかもそうですよね。日本語でも、滑らかな表現の副詞を「スルスル」と言いますが、そこから来ているのかもしれない、ということも言われていました。:bulb:　オモシロイ！

jQueryというのは、JavaScriptを簡単に使えるようにしたもの。らしいです。

なので、「**スルスル動くJavaScriptを実装するための、簡単に使える拡張機能**」みたいなものが、slick.jsということだろうなと思いました。

# slick.jsの使い方
手順は公式のサイトを参考にします。

https://kenwheeler.github.io/slick/#:~:text=%E3%81%9F%E3%81%8F%E3%81%95%E3%82%93%E3%81%82%E3%82%8A%E3%81%BE%E3%81%99...-,%E3%81%AF%E3%81%98%E3%82%81%E3%82%8B,-HTML%20%E3%83%9E%E3%83%BC%E3%82%AF%E3%82%A2%E3%83%83%E3%83%97

このスライダーを実装します。:information_desk_person:
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3638020/507a9de4-1cef-1d71-91c8-3d0cdf2cd538.png)


▼下準備として、slick-1.8.1.zipをダウンロードしておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3638020/a53974c1-a873-e0e1-c2a1-b93ec315ed41.png)


## では、やってみましょう！
下図の位置にバナーのスライダーを入れてみます。（良い感じのバナーがなかったので、写真をスライダーにしてみます）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3638020/609f0ca9-38db-28bf-e9e8-c76a767573ad.png)

### 1．htmlを追加します
この部分がスライダーになります。Top_sliderのclass名は任意です。
のちのち出てくるので、これは**重要ポイント**です！
```
<div class="Top_slider">
      <div><img src="images/dummy1.png"></div>
      <div><img src="images/dummy1.png"></div>
      <div><img src="images/dummy1.png"></div>
    </div>
```
今は縦に3つ並んでいる状態です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3638020/83aa6a6d-0f80-8651-808a-78f94d382541.png)


### 2．　/slickフォルダをプロジェクトに移動する
図はダウンロードしたslick-1.8.1.zipの中身です。
「slick」ファルダを任意のthemes以下に配置します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3638020/0a11d87b-80b2-e091-9c79-beff1ae7da5e.png)




### 3．head部分にslick.cssを追加します
私はlink.htmlに下記を記述しました。

```
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
// Add the new slick-theme.css if you want the default styling
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3638020/de532417-db76-1eaa-c7db-02e8555c3fed.png)

「// デフォルトのスタイリングを使用する場合は、新しい slick-theme.css を追加してください」
とあるのですが、実装した結果を見て、slick-theme.cssは別に要らないかなと思いました。
なので、**下記の2行はlink.htmlに含めるかは任意**です。

```
// Add the new slick-theme.css if you want the default styling
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
```

### 4．slick.js を <body> 終了タグの前、jQuery の後に追加します
**body終了タグの前** に記述することが大事です！:point_up_2:
```
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3638020/9c6d2b6f-eddd-0313-af75-193574017b1e.png)

このあと、下記も追加します。
```
$('.single-item').slick();
```
そしてclass名を変更します。
single-itemから、Top_sliderに変えました。　



![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3638020/8b2b5e3f-b0a6-857c-48be-abcfe97bc181.png)


### 5．スクリプトファイルまたはインラインスクリプトタグでスライダーを初期化します

これも、続けて、4の後ろに記述します。
your-classは、Top_sliderに変更します。

```
<script>
$(document).ready(function(){
  $('.your-class').slick({
    setting-name: setting-value
  });
});
</script>
```


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3638020/e1abcaf2-edad-c5af-bca4-d83a144ddcd5.png)


### 6.完成！
![Adobe Express 2024-06-30 14.37.00.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3638020/dd04ee4f-d8ab-5d1f-6f93-f6746ef0649a.gif)

# 実装してみての感想
何をどこに記述するか、というところに少し躓きました。公式の手順には当たり前の知識なのかもしれないことが、初心者には難しいんだなと。
**このコードだったら、どのファイルに記述する、とか、どの順番で記述するか**、というのをロジカルに考えられるようにしたいなーと思います。:thinking: