カルーセル実装手順（コピペ化）

See the Pen Untitled by ryotsunekawa (@ryotsunekawa) on CodePen.

今回はカルーセル（スライドさせるやつ）のやり方を紹介します。

手順は次の通りです。（今回はCND経由でslickを読み込んで実装します。）

1. html内にCDN経由でslickに必要な要素とjQueryを読み込む
2. html内にスライドさせる画像を入れる
3. jsをカスタマイズ

スライドされるのに必要な手順はこれだけです。

さっそくやってみましょう！！

1. html内にCDN経由でslickに必要な要素とjQueryを読み込む

See the Pen Untitled by ryotsunekawa (@ryotsunekawa) on CodePen.

つね

HTMLをクリックして確認してみてください ！！

2.html内にスライドさせる画像を入れる

See the Pen Untitled by ryotsunekawa (@ryotsunekawa) on CodePen.

つね

HTMLをクリックして確認してみてください ！！

3. jsをカスタマイズ

See the Pen Untitled by ryotsunekawa (@ryotsunekawa) on CodePen.

つね

jsをクリックして確認してみてください ！！

すると、下記のような動作をします。

カルーセルを動かすにはドラッグして左右に動かすか、矢印キーを左右に動かしてください。

（画像は0.5倍でみるとちょうどよいです。）

See the Pen Untitled by ryotsunekawa (@ryotsunekawa) on CodePen.

今のままだと味気ないのでjsをカスタマイズしてみましょう！！

See the Pen Untitled by ryotsunekawa (@ryotsunekawa) on CodePen.

これで表示させてみると．．．

See the Pen Untitled by ryotsunekawa (@ryotsunekawa) on CodePen.

わかりにくいですが左右のナビゲーションボタンが表示されていません。

これはslickのプラグインで白色になっているからです。

なのでcssをいじって黒色に変えましょう！！

少しいじったものがこちら！！

See the Pen Untitled by ryotsunekawa (@ryotsunekawa) on CodePen.

これで完成です！！もっと詳しく知りたい方はこちらの記事がおすすめです！！

【jQuery】スライダープラグイン「slick」の使い方を詳しく解説

slickをダウンロードして行うやり方が載っています！！

最後までご覧いただきありがとうございました。