2026.06.01

slick.jsを使ってスライダーをつくってみる

designchips

jQueryのライブラリとして定番の「slick.js」を使ってスライドショーをつくる手順をご紹介していきます。
様々なオプション機能もあり、カスタマイズ可能なため広く人気を集めているライブラリです。

slick.jsは様々なブラウザでも比較的バグがなく、レスポンシブ設定がしやすい特徴があります。また、イベントを発動されるタイミングなど、プロパティの調整で操作ができる点も人気の要因と言えるでしょう。

Contents

slick.jsを使ってスライドショーを作る方法
slick.jsのオプション

slick.jsを使ってスライドショーを作る方法

まずは、基本となるHTMLコードを確認していきましょう。

HTML

サンプルコードとして以下のようなコードをご用意しました。

<section class="slider">
	<ul>
		<li><img src="images/slide01.jpg"></li>
		<li><img src="images/slide02.jpg"></li>
		<li><img src="images/slide03.jpg"></li>
		<li><img src="images/slide04.jpg"></li>
		<li><img src="images/slide05.jpg"></li>
		<li><img src="images/slide06.jpg"></li>
		<li><img src="images/slide07.jpg"></li>
		<li><img src="images/slide08.jpg"></li>
		<li><img src="images/slide09.jpg"></li>
		<li><img src="images/slide10.jpg"></li>
	</ul>
</section>

liタグにスライドしたい画像を配置し、親要素としてulタグで囲っています。

<head>内でslick.jsに必要なCSSを２つ読み込む

そして、<head>～</head>内に「slick.css」と「slick-theme.css」を読み込みます。

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css"/>

</body>の直前でjQueryとslick.jsを読み込む

slick.jsを利用するためにには「jQuery」を必ず読み込む必要がありますのでお忘れなく。
</body>の直前でslick.jsに必要な「jQuery」と「slick.js」を読み込みます。

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

CSS

ul{
	list-style: none;
	width: 100%;
	margin: 2rem auto;
	padding: 0;
}
li{
	margin: 0 0.1%;
}
img{
	width: 100%;
}

ul

スライドする要素を囲うulタグに対し、リストマークを非表示にして上下にマージンを取っています。

li

スライドする画像の間隔を少し空けたいので、左右に0.1%のmarginを指定しています。

javascriptを記述

先ほど、jQueryとslick.jsを読み込んだ後ろ（</body>タグの直前）に、javascriptを実行するコードを記述していきます。

slick.jsの基本設定は以下のようになります。

$(‘.slider’).slick();

この基本設定に、いくつかオプションを指定していきます。

<script type="text/javascript">
	$("ul").slick({
		dots: true,
		slidesToShow: 3,
		slidesToScroll: 1,
		centerMode: true,
		autoplay: true,
		autoplaySpeed: 3000,
		arrows: false,
		responsive: [
			{
			breakpoint: 768, // 768px以下の設定
			settings: {
				slidesToShow: 1
			}
			}
		]
	});
</script>

ulタグに対してslick.jsが起動するようにして、いくつかのオプション設定でカスタマイズしています。

slick.jsのオプション

slick.jsは多くのオプション設定が可能です。

オプション名	デフォルト値	内容
autoplay	false	自動再生の有無
autoplaySpeed	3000	自動再生の切り替え感覚（ミリ秒）
arrows	true	左右の矢印ボタンの有無
dots	false	ドットインジケーターの表示
infinite	true	スライドのループ再生の有無
speed	300	スライド切替アニメーション速度（ミリ秒）
slidesToShow	1	一度に表示するスライド数
slidesToScroll	1	一度にスライドする数
fade	false	スライドではなくフェード切替にするかどうか
pauseOnHover	true	マウスホバー時に自動再生を一時停止するかどうか
pauseOnFocus	true	フォーカス時に自動再生を一時停止するかどうか
draggable	true	マウスドラッグでのスワイプ操作の有無
swipe	true	タッチパネルデバイスでのスワイプ操作の有無
centerMode	true	スライドを中央寄せで表示するかどうか
centerPadding	’50px’	centerModeがtrueの場合の左右のパディング幅
variableWidth	false	スライドの高さに合わせて要素を調整するかどうか
lazyLoad	null	画像の読み込むタイミング（’ondemand’など）
asNavFor	null	他のスライダーと連動させる（サムネイル機能）
responsive	null	ブレークポイントごとの設定変更用

注意点

pxなどで数値設定をする場合は、必ず引用符「’50px’」で囲みます

slick.jsのレスポンシブ対応

例えば、デスクトップで閲覧する場合は3つの要素を表示してスライドさせるが、スマホの場合は小さくなってしまうので、1つのみ表示して、1つずつスライドさせたい場合には、javascript内に「responsiveオプション」を設定することで実現できます。

先ほどの「javascript」に記述した以下の部分でがそれにあたります。

$('.slider').slick({
  slidesToShow: 3,
  responsive: [
    {
      breakpoint: 768, // 768px以下の場合、一度に表示する画像数は1にする
      settings: {
        slidesToShow: 1
      }
    }
  ]
});

responsiveオプションの中に、

breakpoint: 768

ウィンドウサイズが横幅768px以下になった場合に以下の指定が適用されます。

setting:{ slidesToShow: 1}

768px以下になった場合には、スライドが見える数を「1」にするという指示になります。

簡易的な作りでサンプルは作成しておりますが、インジケーターのドットのデザインやスライドする要素のデザインなどは、CSS等でカスタマイズできますので挑戦してみてください。

デモサンプル

#jQuery #slick #スライドショー