slickを使ってスライドショーを作成

今回は、スライダーを実装したい時によく使われるslick.jsのお話をしたいと思います。

slickを使うことでページに動きが出せるため、いろんなサイトで使われていますね。

slickとは

slickはスライダーを作成するためのプラグインです。レスポンシブにも対応していてカスタマイズの幅も広いので多くのサイトで使われています。

slickの使い方

事前準備

まずは、HTML内のhead終了タグの直前にslickのCSSを記載します。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css">

次にbody終了タグの直前にjQuery、slickのJavaScriptを記載します。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

HTML、CSS、JavaScriptを書いていく

スライドショーを表示させたい場所にHTMLを書き込んでください。
CSSで位置やサイズを調節し、JavaScriptで速度、ドットの有無などを書き込みます。

See the Pen oNZjYPw by hikaru (@cowardly-rabbit) on CodePen.