slick.jsのオプション＆基本的な使い方

jQueryプラグイン「slick.js」で使用できるオプションをコメントで解説。

使い方

CSSとJavascriptを読み込み
必要コードを記載

スライドサンプル

矢印型スライダー
サムネイル型スライダー
フェード型スライダー
オプション一覧

1.　CSSとJavascriptを読み込み

slickを使用するには下記のCSSとJavascriptファイルを読み込みます。

<!-- 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.min.css">

<!-- Javasript -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

2.　必要コードを記載

下記のHTMLとJavascriptを記述してデモのように表示されたらslickを使用できる準備完了です。

HTML

<div class="slider">
  <div class="slide" style="background-image: url(https://picsum.photos/id/237/960/540);"></div>
  <div class="slide" style="background-image: url(https://picsum.photos/id/236/960/540);"></div>
  <div class="slide" style="background-image: url(https://picsum.photos/id/235/960/540);"></div>
</div>

CSS

.slider {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  height: 500px; /* 高さ */
}
.slider .slide {
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.slider > .slick-list,
.slider > .slick-list > .slick-track,
.slider > .slick-list > .slick-track > .slick-slide > div {
  position: relative;
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
}

Javscript

$('.slider').slick({
  arrows: false,
  autoplay: true, //自動再生ON
  autoplaySpeed: 2000, //切り替え時間
});

デモ

See the Pen
slick – autoplay by kura (@kuranopen)
on CodePen.

マウスの横スライドでスライドが動きます。

矢印型スライダー

See the Pen
slick – autoplay by kura (@kuranopen)
on CodePen.

矢印とドット付きのスライダーです。

HTML

<div class="slider">
  <div class="slide" style="background-image: url(https://picsum.photos/id/237/960/540);"></div>
  <div class="slide" style="background-image: url(https://picsum.photos/id/236/960/540);"></div>
  <div class="slide" style="background-image: url(https://picsum.photos/id/235/960/540);"></div>
</div>

CSS

.slider {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  height: 500px; /* 高さ */
}
.slider .slide {
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.slick-prev:before,
.slick-next:before {
  font-size: 32px;
}
.slick-prev {
  z-index: 1;
  left: 50px;
}
.slick-next {
  z-index: 1;
  right: 50px;
}
.slick-dots {
  bottom: 20px;
}
.slick-dots li button::before {
  color: #fff;
}
.slider > .slick-list,
.slider > .slick-list > .slick-track,
.slider > .slick-list > .slick-track > .slick-slide > div {
  position: relative;
  height: 100%;
}

Javscript

$('.slider').slick({
  autoplay: true, //自動再生ON
  autoplaySpeed: 2000, //切り替え時間
  fade: true, //フェードON
  speed: 2000,  //フェードスピード
  dots: true,
});

拡大＆フェード型

メインのFV画像でよく使用されている、画像が少しずつ拡大（ズーム）してフェードで画像が切り替わるスライドです。

デモ

See the Pen
jQuery Slick Slider – Fade & Zoom by kura (@kuranopen)
on CodePen.

HTML

See the Pen
jQuery Slick Slider – Fade & Zoom by kura (@kuranopen)
on CodePen.

主な特徴はなく、スライドを構築できるHTMLです。

CSS

.slide-animation{
    animation: fadezoom 8s 0s forwards;
}
@keyframes fadezoom {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2);
  }
}

CSSは、ズーム用のアニメーション@keyframes fadezoomとそのアニメーションを適用するクラス.slide-animationを用意します。

Javascript

var $slide = $(".slide")
  .slick({
    infinite: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: true,
    speed: 2000,
    autoplaySpeed: 4000,
    autoplay: true
  })
  .on({
    beforeChange: function(event, slick, currentSlide, nextSlide) {
      $(".slick-slide", this).eq(currentSlide).addClass("preve-slide");
      $(".slick-slide", this).eq(nextSlide).addClass("slide-animation");
    },
    afterChange: function() {
      $(".preve-slide", this).removeClass("preve-slide　slide-animation");
    }
  });
$slide.find(".slick-slide").eq(0).addClass("slide-animation");

Javascriptは、スライド切り替え動作前に実行するイベントと動作後に実行するイベントそれぞれにアニメーション関連の処理を加えます。

仕組みは、画像が切り替わる動作が始まった直後に次の画像のアニメーションを開始。
そして、切り替わる前の画像に後でアニメーションを停止するためのクラスを付与します。

次の画像に切り替わったら、前の画像のアニメーションを停止して、アニメーションを停止するためのクラスを削除します。

ただこれだけだと、ページを開いたときに1枚目の画像にアニメーションがないため、最後のコードでアニメーションを開始します。

サムネイル型スライダー

See the Pen
slick (horizontal) by kura (@kuranopen)
on CodePen.

フェード型スライダー

フェードイン、フェードアウトして切り替わるスライドです。

See the Pen
slick – fade by Aquarium (@aquarium)
on CodePen.

Javascript


var $slide = $(".slide")
  .slick({
    fade: true,    // fedeオン
    speed: 1500,   // 画像切り替えにかかる時間（ミリ秒）
    autoplaySpeed: 3000,   // 自動スライド切り替え速度
    arrows: false,         // 矢印表示・非表示
    autoplay: true,        // 自動再生
    slidesToShow: 1,       // スライド表示数
    slidesToScroll: 1,     // スライドする数
    infinite: true         // 無限リピート オン・オフ
  });

マウスドラッグの切り替え可
画像が切り替わっている間はマウスドラッグでの切り替えはできません。
画像の切り替え速度を変更するにはspeedの値を調整します。値を大きくするほどゆっくり切り替わります。

オプション一覧


$('.slick').slick({

  // タブと矢印キーのナビゲーションを有効
  accessibility: true,

  // シングルスライド水平カルーセルの適応高さを有効
  adaptiveHeight: false,

  // 自動再生を有効
  autoplay: false,

  // 自動再生速度 ミリ秒
  autoplaySpeed: 3000,

  // 前/次の矢印を有効
  arrows: true,

  // スライダーを他のスライダー（クラスまたはID名）のナビゲーションになるように設定
  asNavFor: null,

  // ナビゲーション矢印を付ける場所を変更します（セレクター、htmlString、配列、要素、jQueryオブジェクト）
  appendArrows: $(element),

  // ナビゲーションドットを付加する場所を変更します（セレクター、htmlString、配列、要素、jQueryオブジェクト）
  appendDots: $(element),

  // ノードを選択したり、「前へ」矢印のHTMLをカスタマイズしたりできます。
  prevArrow: '',

  // ノードを選択したり、「次へ」矢印のHTMLをカスタマイズしたりできます。
  nextArrow: '',

  // 部分的な前/次のスライドで中央揃えのビューを有効にします。奇数のslidesToShowカウントで使用します。
  centerMode: false,

  // センターモード時のサイドパディング（pxまたは％）
  centerPadding: '50px',

  // CSS3アニメーションの緩和
  cssEase: 'ease',

  // カスタムページングテンプレート。
  customPaging: function(slider, i) {
  },

  // ドットインジケーターを表示
  dots: false,

  // スライドインジケータドットコンテナのクラス
  dotsClass: 'slick-dots',

  // マウスのドラッグを有効にする
  draggable: true,

  // フェードを有効にする
  fade: false,

  // 選択した要素へのフォーカスを有効にする（クリック）
  focusOnSelect: false,
  focusOnChange: false,

  // jQueryanimateのイージングを追加します。イージングライブラリまたはデフォルトのイージングメソッドで使用します
  easing: 'linear',

  // 非無限カルーセルのエッジをスワイプするときの抵抗
  edgeFriction: 0.35,

  // 無限ループスライディング
  infinite: true,

  // スライドして開始します
  initialSlide: 0,

  // 遅延読み込み手法を設定します。「オンデマンド」または「プログレッシブ」を受け入れます
  lazyLoad: 'ondemand',

  // レスポンシブ設定はモバイルファースト計算を使用します
  mobileFirst: false,

  // フォーカスで自動再生を一時停止
  pauseOnFocus: true,

  // ホバー時に自動再生を一時停止します
  pauseOnHover: true,

  // ドットがホバーされたら自動再生を一時停止します
  pauseOnDotsHover: false,

  // レスポンシブオブジェクトが応答する幅。'window'、 'slider'、または 'min'（2つのうち小さい方）にすることができます
  respondTo: 'window',

  // ブレークポイントと設定オブジェクトを含むオブジェクト（デモを参照）。指定された画面幅で設定セットを有効にします。特定のブレークポイントでスリックを無効にするには、設定をオブジェクトではなく「スリック解除」に設定します。
  responsive

  // これを複数に設定すると、グリッドモードが初期化されます。slidesPerRowを使用して、各行に含めるスライドの数を設定します。
  rows: 1,

  // スライドとして使用する要素クエリ
  slide: '',

  // 行オプションを介して初期化されたグリッドモードでは、これにより、各グリッド行に含まれるスライドの数が設定されます。
  slidesPerRow: 1,

  // 表示するスライドの数
  slidesToShow: 1,

  // スクロールするスライドの数
  slidesToScroll: 2,

  // 速度
  speed: 500,

  // スワイプを有効にする
  swipe: true,

  // slidesToScrollに関係なく、ユーザーがスライドに直接ドラッグまたはスワイプできるようにする
  swipeToSlide: false,

  // タッチでスライドモーションを有効にする
  touchMove: true,

  // スライドを進めるには、ユーザーは（1 / touchThreshold）*スライダーの幅の長さをスワイプする必要があります
  touchThreshold: 5,

  // CSSトランジションを有効/無効にします
  useCSS: true,

  // CSS変換を有効/無効にします
  useTransform: true,

  // 可変幅スライド
  variableWidth: false,

  // 垂直スライドモード
  vertical: false,

  // 垂直スワイプモード
  verticalSwiping: false,

  // スライダーの方向を右から左に変更します
  rtl: false,

  // アニメーション中にスライドを進める要求を無視します
  waitForAnimate: true,

  // スライドのzIndex値を設定します。IE9以下で役立ちます
  zIndex: 1000
  

});

slick タイプ別サンプル

デザインを本で学びたい人向けの記事

初心者ノンデザイナーがこれからデザインを勉強するのにおすすめの本 4選

slick 矢印をカスタマイズ変更する

プラグインを使わずにjQueryを使って汎用的なモーダルを実装する

jQuery 矢印付き画像のスライドショー＆スライダーをslickで作る

Magnific Popupでポップアップ＆ギャラリーを作る

jQueryプラグイン validationEngineエラーカスタマイズ位置変更/拡張子

お得ニュース

AmazonでApple Watchが5000円引き。ポイント3%付きのお得セール開催中

ゲーミングPCが5万円引き。マウスコンピューターのビッグサマーセール第2弾が開催

slick.jsのオプション＆基本的な使い方

1.　CSSとJavascriptを読み込み

2.　必要コードを記載

HTML

CSS

Javscript

デモ

矢印型スライダー

HTML

CSS

Javscript

拡大＆フェード型

デモ

HTML

CSS

Javascript

サムネイル型スライダー

HTML

CSS

Javascript

フェード型スライダー

Javascript

オプション一覧

slick タイプ別サンプル

デザインを本で学びたい人向けの記事

関連記事

お得ニュース

プロフィール

slick.jsのオプション＆基本的な使い方

1. CSSとJavascriptを読み込み

2. 必要コードを記載

HTML

CSS

Javscript

デモ

矢印型スライダー

HTML

CSS

Javscript

拡大＆フェード型

デモ

HTML

CSS

Javascript

サムネイル型スライダー

HTML

CSS

Javascript

フェード型スライダー

Javascript

オプション一覧

slick タイプ別サンプル

デザインを本で学びたい人向けの記事

関連記事

お得ニュース

プロフィール

1.　CSSとJavascriptを読み込み

2.　必要コードを記載