【slick】基本設定ガイド｜初心者向け導入方法とカスタマイズテクニック

2024-12-28 2025.05.07

1 必要なライブラリの導入
- 1.1 CSSの導入
- 1.2 JavaScriptの導入
2 CodePen ソースコードサンプル
3 HTML構造の設定
- 3.1 注意点: <ul>と<li>タグの使用を避ける
- 3.2 Slickリセットクラスの設定
4 Slick Carouselの初期化
5 オプション紹介
6 まとめ

Slick Carouselは、jQueryベースのスライダーライブラリで、シンプルな設定で美しいスライダーを作成することができます。レスポンシブ対応や多彩なオプションが特徴で、画像ギャラリーやコンテンツスライダーなど、さまざまな用途に利用されています。この記事では、Slick Carouselの基本的な設定方法からカスタマイズテクニックまで、初心者でも簡単に導入できる手順を詳しく解説します。

必要なライブラリの導入

Slick Carouselを使用するためには、以下のライブラリをHTMLに導入する必要があります。

CSSの導入

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

JavaScriptの導入

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

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

ポイント:

jQueryの導入: Slick CarouselはjQueryに依存しているため、必ず先にjQueryを読み込みます。
Slick CarouselのCSSとJS: 最新バージョンのSlick CarouselをCDNから読み込むことで、簡単に導入可能です。

CodePen ソースコードサンプル

HTML構造の設定

Slick Carouselを適用するための基本的なHTML構造を設定します。

<div class="carousel slick">
  <div><img src="https://web-developer-note.com/codepen/images/slide01.jpg" alt="スライド1" width="600" height="400" class="imgauto"></div>
  <div><img src="https://web-developer-note.com/codepen/images/slide02.jpg" alt="スライド2" width="600" height="400" class="imgauto"></div>
  <div><img src="https://web-developer-note.com/codepen/images/slide03.jpg" alt="スライド3" width="600" height="400" class="imgauto"></div>
  <div><img src="https://web-developer-note.com/codepen/images/slide04.jpg" alt="スライド4" width="600" height="400" class="imgauto"></div>
  <div><img src="https://web-developer-note.com/codepen/images/slide05.jpg" alt="スライド5" width="600" height="400" class="imgauto"></div>
</div>

注意点: `<ul>`と`<li>`タグの使用を避ける

Slick Carouselを実装する際、HTML構造として<ul>と<li>タグの使用は避けることをおすすめします。Slickはスライダー機能を適用する過程で、自動的に追加のHTMLタグを生成します。そのため、<ul>直下に<li>を配置すると、元の構造が崩れてしまい、意図しないレイアウトの乱れが発生する可能性があります。実際に実装し、ブラウザの検証ツールで確認すると、この問題が明確にわかります。

Slickリセットクラスの設定

スライダーの読み込み時に一時的に非表示にし、Slickが正常に初期化された後に表示させるために、以下のCSSを追加します。

/* スライダー読み込みまで非表示 */
.slick {
    opacity: 0;
    transition: opacity 0.3s linear;
}
.slick.slick-initialized {
    opacity: 1;
}

ポイント:

.slickクラスに対してopacity: 0;を設定し、スライダーが非表示になるようにします。
transitionプロパティを使用して、スライダーが表示される際にフェードイン効果を適用します。
.slick.slick-initializedクラスが追加された後にopacity: 1;を設定することで、スライダーがスムーズに表示されます。

この設定により、Slick Carouselが初期化されるまでスライダーが透明になり、ユーザーにとって視覚的に自然な表示切替が実現します。

Slick Carouselの初期化

HTML構造が整ったら、JavaScriptでSlick Carouselを初期化します。

$(document).ready(function(){
  $('.carousel').slick({
    dots: false,
    arrows: false,
    autoplay: true,
    autoplaySpeed: 3000,
    speed: 800,
    slidesToShow: 3,
    slidesToScroll: 1,
    pauseOnFocus: false,
    pauseOnHover: false,
    pauseOnDotsHover: false,
    waitForAnimate: false,
    responsive: [
      {
        breakpoint: 767,
        settings: {
          slidesToShow: 1,
          arrows: false,
          fade: true,
        }
      }
    ]
  });
});

オプション紹介

Slick Carouselには多くのオプションが用意されています。以下に、さらに多くのオプションを表形式で紹介します。

オプション名	デフォルト値	説明
`accessibility`	true	左右ボタンで画像の切り替えをできるかどうかを設定。キーボード操作を有効にします。
`autoplay`	false	スライダーを自動再生するかどうか。`true`で自動再生されます。
`autoplaySpeed`	3000	自動再生で切り替えをする時間（ミリ秒）。例：3000は3秒。
speed	300	自動再生や左右の矢印でスライドするスピード（ミリ秒）。例：400は0.4秒。
pauseOnHover	true	自動再生時にスライドのエリアにマウスオンで一時停止するかどうか。
`pauseOnDotsHover`	`true`	自動再生時にドットにマウスオンで一時停止するかどうか。
`cssEase`	`'ease'`	切り替えのアニメーション。`ease`, `linear`, `ease-in`, `ease-out`, `ease-in-out`など。
dots	false	画像下のドット（ページ送り）を表示するかどうか。
`dotsClass`	`'slick-dots'`	ドットのclass名を指定。カスタムスタイルを適用する際に使用。
`draggable`	true	ドラッグができるかどうか。マウスやタッチでスライドを操作可能にします。
fade	false	切り替え時のフェードイン設定。`true`でフェード効果を有効にします。
arrows	true	左右の次へ、前へボタンを表示するかどうか。
infinite	true	無限スクロールにするかどうか。最後の画像の次は最初の画像が表示されます。
`initialSlide`	0	最初のスライダーの位置。0は最初のスライド。
`lazyLoad`	`'ondemand'`	画像の遅延表示。`'ondemand'`または`'progressive'`。
`slidesToShow`	1	スライドのエリアに表示されるスライド数。
`slidesToScroll`	1	一度にスライドする数。
`vertical`	false	縦方向へのスライドを有効にするかどうか。
swipe	true	タッチスワイプに対応するかどうか。
`centerMode`	`false`	表示中の画像を中央に配置するかどうか。
`centerPadding`	`'50px'`	中央のスライドの左右に表示される余白。
`variableWidth`	`false`	スライドの幅を固定せず、内容に応じて可変にするかどうか。
`rtl`	`false`	スライダの表示方向を”右から左”に変更します。 * このオプションを有効にするには、スライダのコンテナにdir=’rtl’属性を付与する必要があります。