【jQuery】スライダープラグイン「slick」実装サンプル集

デザオ
slick（スリック）の使い方をまとめてくださいー
デザコト
わかりましたー

よく見かけるスライダー（自動再生）

コードを見る（HTML・CSS・jQuery）

HTML

<div class="sliderArea">
  <div class="regular slider">
    <div><img src="https://125naroom.com/demo/common/img/slide01.svg" alt="スライド1"></div>
    <div><img src="https://125naroom.com/demo/common/img/slide02.svg" alt="スライド2"></div>
    <div><img src="https://125naroom.com/demo/common/img/slide03.svg" alt="スライド3"></div>
    <div><img src="https://125naroom.com/demo/common/img/slide04.svg" alt="スライド4"></div>
    <div><img src="https://125naroom.com/demo/common/img/slide05.svg" alt="スライド5"></div>
  </div>
</div>

CSS

/* ===== slick の見本（どの見本も同じ） ===== */
.sliderArea {
  max-width: 560px;
  margin: 0 auto;
}
.slider img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}
.slider .slick-slide {
  box-sizing: border-box;
  padding: 0 4px;
}
/* 動きを減らす設定のとき（slick がつける動きも止める） */
@media (prefers-reduced-motion: reduce) {
  .slick-track, .slick-list { transition: none !important; }
}

jQuery

$(function () {
  $(".regular").slick({
    autoplay: true, // 自動再生を設定
    autoplaySpeed: 4000, // 自動再生のスピード（ミリ秒単位）
    dots: true // ドットインジケーターの表示
  });
});
見本ページをひらく（よく見かけるスライダー）

2枚の画像を表示、1枚ずつスライド

コードを見る（HTML・CSS・jQuery）

HTML

<div class="sliderArea">
  <div class="regular_2 slider">
    <div><img src="https://125naroom.com/demo/common/img/slide01.svg" alt="スライド1"></div>
    <div><img src="https://125naroom.com/demo/common/img/slide02.svg" alt="スライド2"></div>
    <div><img src="https://125naroom.com/demo/common/img/slide03.svg" alt="スライド3"></div>
    <div><img src="https://125naroom.com/demo/common/img/slide04.svg" alt="スライド4"></div>
    <div><img src="https://125naroom.com/demo/common/img/slide05.svg" alt="スライド5"></div>
  </div>
</div>

CSS

/* ===== slick の見本（どの見本も同じ） ===== */
.sliderArea {
  max-width: 560px;
  margin: 0 auto;
}
.slider img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}
.slider .slick-slide {
  box-sizing: border-box;
  padding: 0 4px;
}
/* 動きを減らす設定のとき（slick がつける動きも止める） */
@media (prefers-reduced-motion: reduce) {
  .slick-track, .slick-list { transition: none !important; }
}

jQuery

$(function () {
  $(".regular_2").slick({
    dots: true, // ドットインジケーターの表示
    infinite: true, // スライドのループを有効にするか
    slidesToShow: 2, // 表示するスライド数を設定
    slidesToScroll: 1 // スクロールするスライド数を設定
  });
});
見本ページをひらく（2枚の画像を表示、1枚ずつスライド）

3枚の画像を表示、3枚ずつスライド

コードを見る（HTML・CSS・jQuery）

HTML

<div class="sliderArea">
  <div class="regular_3 slider">
    <div><img src="https://125naroom.com/demo/common/img/slide01.svg" alt="スライド1"></div>
    <div><img src="https://125naroom.com/demo/common/img/slide02.svg" alt="スライド2"></div>
    <div><img src="https://125naroom.com/demo/common/img/slide03.svg" alt="スライド3"></div>
    <div><img src="https://125naroom.com/demo/common/img/slide04.svg" alt="スライド4"></div>
    <div><img src="https://125naroom.com/demo/common/img/slide05.svg" alt="スライド5"></div>
  </div>
</div>

CSS

/* ===== slick の見本（どの見本も同じ） ===== */
.sliderArea {
  max-width: 560px;
  margin: 0 auto;
}
.slider img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}
.slider .slick-slide {
  box-sizing: border-box;
  padding: 0 4px;
}
/* 動きを減らす設定のとき（slick がつける動きも止める） */
@media (prefers-reduced-motion: reduce) {
  .slick-track, .slick-list { transition: none !important; }
}

jQuery

$(function () {
  $(".regular_3").slick({
    dots: true, // ドットインジケーターの表示
    infinite: true, // スライドのループを有効にするか
    slidesToShow: 3, // 表示するスライド数を設定
    slidesToScroll: 3 // スクロールするスライド数を設定
  });
});
見本ページをひらく（3枚の画像を表示、3枚ずつスライド）

サムネイル付き

コードを見る（HTML・CSS・jQuery）

HTML

<div class="sliderArea">
  <div class="slider_thumb slider">
    <div><img src="https://125naroom.com/demo/common/img/slide01.svg" alt="スライド1"></div>
    <div><img src="https://125naroom.com/demo/common/img/slide02.svg" alt="スライド2"></div>
    <div><img src="https://125naroom.com/demo/common/img/slide03.svg" alt="スライド3"></div>
    <div><img src="https://125naroom.com/demo/common/img/slide04.svg" alt="スライド4"></div>
    <div><img src="https://125naroom.com/demo/common/img/slide05.svg" alt="スライド5"></div>
  </div>
  <div class="thumb">
    <div><img src="https://125naroom.com/demo/common/img/slide01.svg" alt="スライド1"></div>
    <div><img src="https://125naroom.com/demo/common/img/slide02.svg" alt="スライド2"></div>
    <div><img src="https://125naroom.com/demo/common/img/slide03.svg" alt="スライド3"></div>
    <div><img src="https://125naroom.com/demo/common/img/slide04.svg" alt="スライド4"></div>
    <div><img src="https://125naroom.com/demo/common/img/slide05.svg" alt="スライド5"></div>
  </div>
</div>

CSS

/* ===== slick の見本（どの見本も同じ） ===== */
.sliderArea {
  max-width: 560px;
  margin: 0 auto;
}
.slider img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}
.slider .slick-slide {
  box-sizing: border-box;
  padding: 0 4px;
}
/* サムネイル */
.thumb {
  margin-top: 8px;
}
.thumb .slick-slide {
  opacity: .45;
  cursor: pointer;
  transition: opacity .3s;
}
.thumb .slick-current {
  opacity: 1;
}
.thumb .slick-prev, .thumb .slick-next {
  width: 28px;
  height: 28px;
}
.thumb .slick-prev { left: -10px; }
.thumb .slick-next { right: -10px; }
/* 動きを減らす設定のとき（slick がつける動きも止める） */
@media (prefers-reduced-motion: reduce) {
  .slick-track, .slick-list { transition: none !important; }
}

jQuery

$(function () {
  $('.slider_thumb').slick({
    arrows: false, // スライドの左右の矢印ボタン
    asNavFor: '.thumb' // スライダを他のスライダのナビゲーションに設定する（class名またはID名）
  });
  $('.thumb').slick({
    asNavFor: '.slider_thumb', // スライダを他のスライダのナビゲーションに設定する（class名またはID名）
    focusOnSelect: true, // クリックでのスライド切り替えを有効にするか
    slidesToShow: 4, // 表示するスライド数を設定
    slidesToScroll: 1 // スクロールするスライド数を設定
  });
});
見本ページをひらく（サムネイル付き）

垂直スライドモード（縦方向に自動再生）

コードを見る（HTML・CSS・jQuery）

HTML

<div class="sliderArea w300">
  <div class="vertical-center slider">
    <div><img src="https://125naroom.com/demo/common/img/slide01.svg" alt="スライド1"></div>
    <div><img src="https://125naroom.com/demo/common/img/slide02.svg" alt="スライド2"></div>
    <div><img src="https://125naroom.com/demo/common/img/slide03.svg" alt="スライド3"></div>
    <div><img src="https://125naroom.com/demo/common/img/slide04.svg" alt="スライド4"></div>
    <div><img src="https://125naroom.com/demo/common/img/slide05.svg" alt="スライド5"></div>
  </div>
</div>

CSS

/* ===== slick の見本（どの見本も同じ） ===== */
.sliderArea {
  max-width: 560px;
  margin: 0 auto;
}
.slider img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}
.slider .slick-slide {
  box-sizing: border-box;
  padding: 0 4px;
}
/* 縦のスライダーは幅 300px */
.sliderArea.w300 {
  max-width: 300px;
}
.slider.slick-vertical .slick-slide {
  padding: 4px 0;
  border: 0;
}
/* 動きを減らす設定のとき（slick がつける動きも止める） */
@media (prefers-reduced-motion: reduce) {
  .slick-track, .slick-list { transition: none !important; }
}

jQuery

$(function () {
  $(".vertical-center").slick({
    autoplay: true, // 自動再生を設定
    autoplaySpeed: 1500, // 自動再生のスピード（ミリ秒単位）
    dots: true, // ドットインジケーターの表示
    vertical: true, // 垂直スライドモード
    verticalSwiping: true, // 垂直のスワイプを有効
    centerMode: true // スライドを中心に表示して部分的に前後のスライドが見えるように設定（奇数番号のスライドに使用）
  });
});
見本ページをひらく（垂直スライドモード）

垂直スライドモード（縦方向に）、2枚の画像を表示（1枚ずつスライド）

コードを見る（HTML・CSS・jQuery）

HTML

<div class="sliderArea w300">
  <div class="vertical-center-2 slider">
    <div><img src="https://125naroom.com/demo/common/img/slide01.svg" alt="スライド1"></div>
    <div><img src="https://125naroom.com/demo/common/img/slide02.svg" alt="スライド2"></div>
    <div><img src="https://125naroom.com/demo/common/img/slide03.svg" alt="スライド3"></div>
    <div><img src="https://125naroom.com/demo/common/img/slide04.svg" alt="スライド4"></div>
    <div><img src="https://125naroom.com/demo/common/img/slide05.svg" alt="スライド5"></div>
  </div>
</div>

CSS

/* ===== slick の見本（どの見本も同じ） ===== */
.sliderArea {
  max-width: 560px;
  margin: 0 auto;
}
.slider img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}
.slider .slick-slide {
  box-sizing: border-box;
  padding: 0 4px;
}
/* 縦のスライダーは幅 300px */
.sliderArea.w300 {
  max-width: 300px;
}
.slider.slick-vertical .slick-slide {
  padding: 4px 0;
  border: 0;
}
/* 動きを減らす設定のとき（slick がつける動きも止める） */
@media (prefers-reduced-motion: reduce) {
  .slick-track, .slick-list { transition: none !important; }
}

jQuery

$(function () {
  $(".vertical-center-2").slick({
    dots: true, // ドットインジケーターの表示
    vertical: true, // 垂直スライドモード
    verticalSwiping: true, // 垂直のスワイプを有効
    centerMode: true, // スライドを中心に表示して部分的に前後のスライドが見えるように設定（奇数番号のスライドに使用）
    slidesToShow: 2, // 表示するスライド数を設定
    slidesToScroll: 1 // スクロールするスライド数を設定
  });
});
見本ページをひらく（垂直スライドモード、2枚の画像を表示）

垂直スライドモード（縦方向に）、3枚の画像を表示（1枚ずつスライド）

コードを見る（HTML・CSS・jQuery）

HTML

<div class="sliderArea w300">
  <div class="vertical-center-3 slider">
    <div><img src="https://125naroom.com/demo/common/img/slide01.svg" alt="スライド1"></div>
    <div><img src="https://125naroom.com/demo/common/img/slide02.svg" alt="スライド2"></div>
    <div><img src="https://125naroom.com/demo/common/img/slide03.svg" alt="スライド3"></div>
    <div><img src="https://125naroom.com/demo/common/img/slide04.svg" alt="スライド4"></div>
    <div><img src="https://125naroom.com/demo/common/img/slide05.svg" alt="スライド5"></div>
  </div>
</div>

CSS

/* ===== slick の見本（どの見本も同じ） ===== */
.sliderArea {
  max-width: 560px;
  margin: 0 auto;
}
.slider img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}
.slider .slick-slide {
  box-sizing: border-box;
  padding: 0 4px;
}
/* 縦のスライダーは幅 300px */
.sliderArea.w300 {
  max-width: 300px;
}
.slider.slick-vertical .slick-slide {
  padding: 4px 0;
  border: 0;
}
/* 動きを減らす設定のとき（slick がつける動きも止める） */
@media (prefers-reduced-motion: reduce) {
  .slick-track, .slick-list { transition: none !important; }
}

jQuery

$(function () {
  $(".vertical-center-3").slick({
    dots: true, // ドットインジケーターの表示
    vertical: true, // 垂直スライドモード
    verticalSwiping: true, // 垂直のスワイプを有効
    centerMode: true, // スライドを中心に表示して部分的に前後のスライドが見えるように設定（奇数番号のスライドに使用）
    slidesToShow: 3, // 表示するスライド数を設定
    slidesToScroll: 1 // スクロールするスライド数を設定
  });
});
見本ページをひらく（垂直スライドモード、3枚の画像を表示）

垂直スライドモード（縦方向に）、4枚の画像を表示（2枚ずつスライド）

コードを見る（HTML・CSS・jQuery）

HTML

<div class="sliderArea w300">
  <div class="vertical-center-4 slider">
    <div><img src="https://125naroom.com/demo/common/img/slide01.svg" alt="スライド1"></div>
    <div><img src="https://125naroom.com/demo/common/img/slide02.svg" alt="スライド2"></div>
    <div><img src="https://125naroom.com/demo/common/img/slide03.svg" alt="スライド3"></div>
    <div><img src="https://125naroom.com/demo/common/img/slide04.svg" alt="スライド4"></div>
    <div><img src="https://125naroom.com/demo/common/img/slide05.svg" alt="スライド5"></div>
  </div>
</div>

CSS

/* ===== slick の見本（どの見本も同じ） ===== */
.sliderArea {
  max-width: 560px;
  margin: 0 auto;
}
.slider img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}
.slider .slick-slide {
  box-sizing: border-box;
  padding: 0 4px;
}
/* 縦のスライダーは幅 300px */
.sliderArea.w300 {
  max-width: 300px;
}
.slider.slick-vertical .slick-slide {
  padding: 4px 0;
  border: 0;
}
/* 動きを減らす設定のとき（slick がつける動きも止める） */
@media (prefers-reduced-motion: reduce) {
  .slick-track, .slick-list { transition: none !important; }
}

jQuery

$(function () {
  $(".vertical-center-4").slick({
    dots: true, // ドットインジケーターの表示
    vertical: true, // 垂直スライドモード
    verticalSwiping: true, // 垂直のスワイプを有効
    centerMode: true, // スライドを中心に表示して部分的に前後のスライドが見えるように設定（奇数番号のスライドに使用）
    slidesToShow: 4, // 表示するスライド数を設定
    slidesToScroll: 2 // スクロールするスライド数を設定
  });
});
見本ページをひらく（垂直スライドモード、4枚の画像を表示）

可変幅のスライド（スライドの幅をバラバラにする）

コードを見る（HTML・CSS・jQuery）

HTML

<div class="sliderArea">
  <div class="variable slider">
    <div><img src="https://125naroom.com/demo/common/img/slide01_500.svg" alt="スライド1"></div>
    <div><img src="https://125naroom.com/demo/common/img/slide02_300.svg" alt="スライド2"></div>
    <div><img src="https://125naroom.com/demo/common/img/slide03_600.svg" alt="スライド3"></div>
    <div><img src="https://125naroom.com/demo/common/img/slide04_800.svg" alt="スライド4"></div>
    <div><img src="https://125naroom.com/demo/common/img/slide05_350.svg" alt="スライド5"></div>
  </div>
</div>

CSS

/* ===== slick の見本（どの見本も同じ） ===== */
.sliderArea {
  max-width: 560px;
  margin: 0 auto;
}
.slider img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}
.slider .slick-slide {
  box-sizing: border-box;
  padding: 0 4px;
}
/* 可変幅：画像の高さをそろえて、幅は画像のまま */
.variable img {
  width: auto;
  height: 300px;
}
@media (max-width: 600px) {
  .variable img { height: 200px; }
}
/* 動きを減らす設定のとき（slick がつける動きも止める） */
@media (prefers-reduced-motion: reduce) {
  .slick-track, .slick-list { transition: none !important; }
}

jQuery

$(function () {
  $(".variable").slick({
    dots: true, // ドットインジケーターの表示
    infinite: true, // スライドのループを有効にするか
    variableWidth: true // 可変幅のスライド（スライドの幅をバラバラにするか）
  });
});
見本ページをひらく（可変幅のスライド）

画面幅いっぱいに並べてスライド（企業サイトでよく見かけますね）

デザオ
横幅いっぱいにならないですー
デザコト
slick-list要素に「overflow: visible;」を指定することで横幅いっぱいになりますよー
コードを見る（HTML・CSS・jQuery）

HTML

<div class="sliderArea">
  <div class="full-screen slider">
    <div><img src="https://125naroom.com/demo/common/img/slide01.svg" alt="スライド1"></div>
    <div><img src="https://125naroom.com/demo/common/img/slide02.svg" alt="スライド2"></div>
    <div><img src="https://125naroom.com/demo/common/img/slide03.svg" alt="スライド3"></div>
    <div><img src="https://125naroom.com/demo/common/img/slide04.svg" alt="スライド4"></div>
    <div><img src="https://125naroom.com/demo/common/img/slide05.svg" alt="スライド5"></div>
  </div>
</div>

CSS

/* ===== slick の見本（どの見本も同じ） ===== */
.sliderArea {
  max-width: 560px;
  margin: 0 auto;
}
.slider img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}
.slider .slick-slide {
  box-sizing: border-box;
  padding: 0 4px;
}
/* 画面幅いっぱい：slick-list のはみ出しを見せる */
.full-screen .slick-list {
  overflow: visible;
}
body {
  overflow-x: hidden;
}
/* 動きを減らす設定のとき（slick がつける動きも止める） */
@media (prefers-reduced-motion: reduce) {
  .slick-track, .slick-list { transition: none !important; }
}

jQuery

$(function () {
  $(".full-screen").slick({
    centerMode: true, // スライドを中心に表示して部分的に前後のスライドが見えるように設定（奇数番号のスライドに使用）
    centerPadding: '5%', // センターモード時のサイドパディング。見切れるスライドの幅。'px'または'%'。
    dots: true, // ドットインジケーターの表示
    autoplay: true, // 自動再生を設定
    autoplaySpeed: 3000, // 自動再生のスピード（ミリ秒単位）
    speed: 1000, // スライド/フェードアニメーションの速度を設定
    infinite: true // スライドのループを有効にするか
  });
});
見本ページをひらく（画面幅いっぱいに並べてスライド）

ドットインジケーターをお洒落にしてみる

コードを見る（HTML・CSS・jQuery）

HTML

<div class="sliderArea">
  <div class="full-screen-o slider">
    <div><img src="https://125naroom.com/demo/common/img/slide01.svg" alt="スライド1"></div>
    <div><img src="https://125naroom.com/demo/common/img/slide02.svg" alt="スライド2"></div>
    <div><img src="https://125naroom.com/demo/common/img/slide03.svg" alt="スライド3"></div>
    <div><img src="https://125naroom.com/demo/common/img/slide04.svg" alt="スライド4"></div>
    <div><img src="https://125naroom.com/demo/common/img/slide05.svg" alt="スライド5"></div>
  </div>
</div>

CSS

/* ===== slick の見本（どの見本も同じ） ===== */
.sliderArea {
  max-width: 560px;
  margin: 0 auto;
}
.slider img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}
.slider .slick-slide {
  box-sizing: border-box;
  padding: 0 4px;
}
/* 画面幅いっぱい：slick-list のはみ出しを見せる */
.full-screen-o .slick-list {
  overflow: visible;
}
body {
  overflow-x: hidden;
}
/* ドット：まる → 今のスライドだけ、せんにのびる */
.full-screen-o .slick-dots li {
  width: auto;
  height: auto;
  margin: 0 4px;
}
.full-screen-o .slick-dots li button {
  width: 10px;
  height: 10px;
  padding: 0;
  border-radius: 5px;
  background: #e8e3d8;
  transition: width .5s, background .5s;
}
.full-screen-o .slick-dots li button::before {
  content: none;
}
.full-screen-o .slick-dots li.slick-active button {
  width: 36px;
  background: #2b2a27;
}
/* 動きを減らす設定のとき（slick がつける動きも止める） */
@media (prefers-reduced-motion: reduce) {
  .slick-track, .slick-list { transition: none !important; }
}

jQuery

$(function () {
  $(".full-screen-o").slick({
    centerMode: true, // スライドを中心に表示して部分的に前後のスライドが見えるように設定（奇数番号のスライドに使用）
    centerPadding: '5%', // センターモード時のサイドパディング。見切れるスライドの幅。'px'または'%'。
    dots: true, // ドットインジケーターの表示
    autoplay: true, // 自動再生を設定
    autoplaySpeed: 3000, // 自動再生のスピード（ミリ秒単位）
    speed: 1000, // スライド/フェードアニメーションの速度を設定
    infinite: true // スライドのループを有効にするか
  });
});
見本ページをひらく（ドットインジケーターをお洒落にしてみる）

1枚目のスライド画像だけ表示時間（秒数）を長くする

コードを見る（HTML・CSS・jQuery）

HTML

<div class="sliderArea">
  <div class="full-screen_one slider">
    <div><img src="https://125naroom.com/demo/common/img/slide01.svg" alt="スライド1"></div>
    <div><img src="https://125naroom.com/demo/common/img/slide02.svg" alt="スライド2"></div>
    <div><img src="https://125naroom.com/demo/common/img/slide03.svg" alt="スライド3"></div>
    <div><img src="https://125naroom.com/demo/common/img/slide04.svg" alt="スライド4"></div>
    <div><img src="https://125naroom.com/demo/common/img/slide05.svg" alt="スライド5"></div>
  </div>
</div>

CSS

/* ===== slick の見本（どの見本も同じ） ===== */
.sliderArea {
  max-width: 560px;
  margin: 0 auto;
}
.slider img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}
.slider .slick-slide {
  box-sizing: border-box;
  padding: 0 4px;
}
/* 画面幅いっぱい：slick-list のはみ出しを見せる */
.full-screen_one .slick-list {
  overflow: visible;
}
body {
  overflow-x: hidden;
}
/* 動きを減らす設定のとき（slick がつける動きも止める） */
@media (prefers-reduced-motion: reduce) {
  .slick-track, .slick-list { transition: none !important; }
}

jQuery

$(function () {
  $(".full-screen_one").slick({
    centerMode: true,
    centerPadding: '5%',
    dots: true,
    autoplay: true,
    autoplaySpeed: 10000,
    speed: 1000,
    infinite: true
  });
  $(".full-screen_one").on("afterChange", function (event, slick, currentSlide) {
    switch (currentSlide) {
      case 0:
        // 1枚目のスライド
        $(this).slick("slickSetOption", "autoplaySpeed", 10000);
        break;
      default:
        // その他のスライド
        $(this).slick("slickSetOption", "autoplaySpeed", 3500);
        break;
    }
  });
});
見本ページをひらく（1枚目のスライド画像だけ表示時間を長くする）

slickのダウンロード

公式サイトのナビゲーションにある『get it now』をクリックして、『Download Now』をクリックすると必要なファイルをダウンロードできます。

【jQuery】スライダープラグイン「slick」実装サンプル集

slickの使い方

ダウンロードファイルの中で必要なファイルは以下の3点です。

  • slick-theme.css
  • slick.css
  • slick.min.js

HTML

<link rel="stylesheet" type="text/css" href="css/slick-theme.css">
<link rel="stylesheet" type="text/css" href="css/slick.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/slick.min.js"></script>

CDNを使う場合は、

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

HTML

基本的な書き方。

<ul class="slider">
  <li><img src="img/01.jpg" alt="img01"></li>
  <li><img src="img/02.jpg" alt="img02"></li>
  <li><img src="img/03.jpg" alt="img03"></li>
  <li><img src="img/04.jpg" alt="img04"></li>
  <li><img src="img/05.jpg" alt="img05"></li>
  <li><img src="img/06.jpg" alt="img06"></li>
  <li><img src="img/07.jpg" alt="img07"></li>
  <li><img src="img/08.jpg" alt="img08"></li>
</ul>

画像にリンクをつける場合は、

<ul class="slider">
  <li><a href="#"><img src="img/01.jpg" alt="img01"></a></li>
  <li><a href="#"><img src="img/02.jpg" alt="img02"></a></li>
  <li><a href="#"><img src="img/03.jpg" alt="img03"></a></li>
  <li><a href="#"><img src="img/04.jpg" alt="img04"></a></li>
  <li><a href="#"><img src="img/05.jpg" alt="img05"></a></li>
  <li><a href="#"><img src="img/06.jpg" alt="img06"></a></li>
  <li><a href="#"><img src="img/07.jpg" alt="img07"></a></li>
  <li><a href="#"><img src="img/08.jpg" alt="img08"></a></li>
</ul>

jQuery

基本的なスライダー（スライドショー）は、1行だけでオッケーです。

$('.slider').slick();

よく見かけるスライダーのオプションを設定するなら、

$('.slider').slick({
  autoplay:true, // 自動再生を設定
  autoplaySpeed:5000, // スライド切り替えの時間を設定
  dots:true // インジケーターを表示
});

オプション設定

オプション説明初期値
accessibilityタブと矢印キーのナビゲーションtrue
adaptiveHeightスライドの高さの自動調整false
autoplay自動再生false
autoplaySpeed自動再生のスピード（ミリ秒単位）3000
arrowsスライドの左右の矢印ボタンtrue
asNavForスライダを他のスライダのナビゲーションに設定する（class名またはID名）null
appendArrowsスライドの左右の矢印ボタンを挿入する場所を変更$(element)
appendDotsドットインジケーターの場所変更$(element)
prevArrow左の矢印ボタンのHTMLをカスタマイズ<button type=”button” class=”slick-prev”>Previous</button>
nextArrow右の矢印ボタンのHTMLをカスタマイズ<button type=”button” class=”slick-next”>Next</button>
centerModeスライドを中心に表示して部分的に前後のスライドが見えるように設定（奇数番号のスライドに使用）false
centerPaddingセンターモード時のサイドパディング。見切れるスライドの幅。’px’または’％’。50px
cssEaseCSS3アニメーションイージングを設定ease
customPagingdots:trueのとき、ドットをカスタマイズn/a
dotsドットインジケーターの表示false
dotsClassドットインジケーターのクラス名を設定slick-dots
draggableマウスでのドラッグ設定true
fadeスライダーの切り替えをスライドではなくフェイドインにするかfalse
focusOnSelectクリックでのスライド切り替えを有効にするかfalse
easingjQueryアニメーションイージングを追加linear
edgeFrictioninfinite:falseのときに最初と最後のスライドをスワイプした時のフリクション値を設定0.15
infiniteスライドのループを有効にするかtrue
initialSlideスライドの開始番号0
lazyLoad画像の遅延読み込みを設定（’ondemand’もしくは’progressive’）ondemand
mobileFirstレスポンシブの設定でモバイルの計算を優先させるfalse
pauseOnFocus自動再生時にスライドにフォーカスした際、自動再生をストップさせるかtrue
pauseOnHover自動再生時にスライドにマウスオーバーした際、自動再生をストップさせるかtrue
pauseOnDotsHover自動再生時にドットインジケーターにマウスオーバーした際、自動再生をストップさせるかfalse
respondToレスポンシブの基準を設定（’window’もしくは’slider’もしくは’min’）window
responsivebreakpointで設定したいブレイクポイントを設定（settingsで画面サイズがブレイクポイントで設定した範囲内になったら振り分ける処理を設定）none
rowsスライドの行数を設定（slidesPerRowを使用して、各行に含めるスライドの数を設定）1
slideスライドとして使用する要素を設定”
slidesPerRowrowsオプションで2以上が設定されている際、各行にいくつのスライドを表示するか設定1
slidesToShow表示するスライド数を設定1
slidesToScrollスクロールするスライド数を設定1
speedスライド/フェードアニメーションの速度を設定300
swipeスワイプを有効にするかtrue
swipeToSlideslidesToScrollの設定に関係なく、ユーザーがスライドを直接ドラッグまたはスワイプした場合は1スライドずつ動かすfalse
touchMoveタッチでスライドさせるかtrue
touchThresholdスワイプでスライドさせる距離を設定（1 / touchThreshold）*スライダの幅5
useCSSCSS traditionを有効にするかtrue
useTransformCSS transformを有効にするかtrue
variableWidth可変幅のスライド（スライドの幅をバラバラにするか）false
vertical垂直スライドモードfalse
verticalSwiping垂直のスワイプを有効にするかfalse
rtlスライダの方向を右から左に変更するか（right to left）false
waitForAnimateスライドアニメーション中にスライドを前後させる要求を無視するかtrue
zIndexスライドの重なり順1000

イベント設定

イベントの取得のやり方は下記になります。

$(selector).on('eventname',function(){
    //行いたい処理
});
afterChangeスライド後に発生
beforeChangeスライド前に発生
breakpoint設定したブレークポイントの範囲内になったら発生
destroyスライダーを解除(unslick)した時に発生
edgeinfinite:falseのとき最初と最後のスライドをドラッグした時に発生
init最初の初期化後に発生
reInitすべての再初期化後に発生
setPosition位置/サイズの変更後に発生
swipeスワイプ/ドラッグ後に発生
lazyLoaded画像遅延ロード後に発生
lazyLoadErrorイメージの読み込みが失敗した後に発生

メモ

スライダープラグイン『slick（スリック）』の使い方と、制作に役立つ実装サンプルをまとめてみました。個人的には『bxSlider』もとても気に入っていたのですが、『slick』さんには敵わないかなと。（あ、個人的見解です。）

jQueryのことで何かわからないことがあればjQueryの日本語リファレンスサイトがあるので一度チェックしてみるといろいろ解決できたりしますよ。

jQuery日本語リファレンス
jQuery（英語版）

さいごに

デザオ
動きがあると楽しいですねー
デザコト
オプションとイベントの設定でいろいろできますよー

ふたりの小言

関連記事

【jQuery】slick を使ってスライドショー（横幅いっぱい＋前後のスライドを半透明にする）
【JavaScript】スワイプができるlightbox系プラグイン『PhotoSwipe』の実装サンプル集
デザインのメモ 2024.7.11

デザコトauthor

あ、いいな、と思うWebデザインを紹介しています。デザインの参考に。やさしいデザインが多いです。Webデザインギャラリー『デザインのこと - Web design gallery』を運営しています。