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

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

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

きのこさん
スライドショー!って呼んでますよー
きのこさん
画像がスライドしますよー

1. よく見かけるスライダー(自動再生)

See the Pen
【jQuery】スライダープラグイン「slick」よく見かけるスライダー(自動再生)
by 125naroom (@125naroom)
on CodePen.

HTMLとjQueryはこちら

HTML

<div class="sliderArea">
  <div class="regular slider">
    <div><img src="https://125naroom.com/demo/img/itukanokotonokoto01.jpg" alt="125naroom"></div>
    <div><img src="https://125naroom.com/demo/img/itukanokotonokoto02.jpg" alt="125naroom"></div>
    <div><img src="https://125naroom.com/demo/img/itukanokotonokoto03.jpg" alt="125naroom"></div>
    <div><img src="https://125naroom.com/demo/img/itukanokotonokoto04.jpg" alt="125naroom"></div>
    <div><img src="https://125naroom.com/demo/img/itukanokotonokoto05.jpg" alt="125naroom"></div>
  </div>
</div>

jQuery

$(document).on('ready', function() {
  $(".regular").slick({
    autoplay: true, // 自動再生を設定
    autoplaySpeed: 4000, // 自動再生のスピード(ミリ秒単位)
    dots: true // ドットインジケーターの表示
  });
});

サンプルページはこちら

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

See the Pen
【jQuery】スライダープラグイン「slick」2枚の画像を表示、1枚ずつスライド
by 125naroom (@125naroom)
on CodePen.

HTMLとjQueryはこちら

HTML

<div class="sliderArea">
  <div class="regular_2 slider">
    <div><img src="https://125naroom.com/demo/img/itukanokotonokoto01.jpg" alt="125naroom"></div>
    <div><img src="https://125naroom.com/demo/img/itukanokotonokoto02.jpg" alt="125naroom"></div>
    <div><img src="https://125naroom.com/demo/img/itukanokotonokoto03.jpg" alt="125naroom"></div>
    <div><img src="https://125naroom.com/demo/img/itukanokotonokoto04.jpg" alt="125naroom"></div>
    <div><img src="https://125naroom.com/demo/img/itukanokotonokoto05.jpg" alt="125naroom"></div>
  </div>
</div>

jQuery

$(document).on('ready', function() {
  $(".regular_2").slick({
    dots: true, // ドットインジケーターの表示
    infinite: true, // スライドのループを有効にするか
    slidesToShow: 2, // 表示するスライド数を設定
    slidesToScroll: 1 // スクロールするスライド数を設定 
  });
});

サンプルページはこちら

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

See the Pen
【jQuery】スライダープラグイン「slick」3枚の画像を表示、3枚ずつスライド
by 125naroom (@125naroom)
on CodePen.

HTMLとjQueryはこちら

HTML

<div class="sliderArea">
  <div class="regular_3 slider">
    <div><img src="https://125naroom.com/demo/img/itukanokotonokoto01.jpg" alt="125naroom"></div>
    <div><img src="https://125naroom.com/demo/img/itukanokotonokoto02.jpg" alt="125naroom"></div>
    <div><img src="https://125naroom.com/demo/img/itukanokotonokoto03.jpg" alt="125naroom"></div>
    <div><img src="https://125naroom.com/demo/img/itukanokotonokoto04.jpg" alt="125naroom"></div>
    <div><img src="https://125naroom.com/demo/img/itukanokotonokoto05.jpg" alt="125naroom"></div>
  </div>
</div>

jQuery

$(document).on('ready', function() {
  $(".regular_3").slick({
    dots: true, // ドットインジケーターの表示
    infinite: true, // スライドのループを有効にするか
    slidesToShow: 3, // 表示するスライド数を設定
    slidesToScroll: 3 // スクロールするスライド数を設定
  });
});

サンプルページはこちら

4. サムネイル付き

See the Pen
【jQuery】スライダープラグイン「slick」サムネイル付き
by 125naroom (@125naroom)
on CodePen.

HTMLとjQueryはこちら

HTML

<div class="sliderArea">
  <div class="slider_thumb slider">
    <div><img src="https://125naroom.com/demo/img/itukanokotonokoto01.jpg" alt="125naroom"></div>
    <div><img src="https://125naroom.com/demo/img/itukanokotonokoto02.jpg" alt="125naroom"></div>
    <div><img src="https://125naroom.com/demo/img/itukanokotonokoto03.jpg" alt="125naroom"></div>
    <div><img src="https://125naroom.com/demo/img/itukanokotonokoto04.jpg" alt="125naroom"></div>
    <div><img src="https://125naroom.com/demo/img/itukanokotonokoto05.jpg" alt="125naroom"></div>
  </div>
  <div class="thumb">
    <div><img src="https://125naroom.com/demo/img/itukanokotonokoto01.jpg" alt="125naroom"></div>
    <div><img src="https://125naroom.com/demo/img/itukanokotonokoto02.jpg" alt="125naroom"></div>
    <div><img src="https://125naroom.com/demo/img/itukanokotonokoto03.jpg" alt="125naroom"></div>
    <div><img src="https://125naroom.com/demo/img/itukanokotonokoto04.jpg" alt="125naroom"></div>
    <div><img src="https://125naroom.com/demo/img/itukanokotonokoto05.jpg" alt="125naroom"></div>
  </div>
</div>

jQuery

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

サンプルページはこちら

5. 垂直スライドモード(縦方向に自動再生)

See the Pen
【jQuery】スライダープラグイン「slick」垂直スライドモード(縦方向に自動再生)
by 125naroom (@125naroom)
on CodePen.

HTMLとjQueryはこちら

HTML

<div class="sliderArea w300">
  <div class="vertical-center slider">
    <div><img src="https://125naroom.com/demo/img/itukanokotonokoto01.jpg" alt="125naroom"></div>
    <div><img src="https://125naroom.com/demo/img/itukanokotonokoto02.jpg" alt="125naroom"></div>
    <div><img src="https://125naroom.com/demo/img/itukanokotonokoto03.jpg" alt="125naroom"></div>
    <div><img src="https://125naroom.com/demo/img/itukanokotonokoto04.jpg" alt="125naroom"></div>
    <div><img src="https://125naroom.com/demo/img/itukanokotonokoto05.jpg" alt="125naroom"></div>
  </div>
</div>

jQuery

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

サンプルページはこちら

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

See the Pen
【jQuery】スライダープラグイン「slick」垂直スライドモード(縦方向に)、2枚の画像を表示(1枚ずつスライド)
by 125naroom (@125naroom)
on CodePen.

HTMLとjQueryはこちら

HTML

<div class="sliderArea w300">
  <div class="vertical-center-2 slider">
    <div><img src="https://125naroom.com/demo/img/itukanokotonokoto01.jpg" alt="125naroom"></div>
    <div><img src="https://125naroom.com/demo/img/itukanokotonokoto02.jpg" alt="125naroom"></div>
    <div><img src="https://125naroom.com/demo/img/itukanokotonokoto03.jpg" alt="125naroom"></div>
    <div><img src="https://125naroom.com/demo/img/itukanokotonokoto04.jpg" alt="125naroom"></div>
    <div><img src="https://125naroom.com/demo/img/itukanokotonokoto05.jpg" alt="125naroom"></div>
  </div>
</div>

jQuery

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

サンプルページはこちら

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

See the Pen
【jQuery】スライダープラグイン「slick」垂直スライドモード(縦方向に)、3枚の画像を表示(1枚ずつスライド)
by 125naroom (@125naroom)
on CodePen.

HTMLとjQueryはこちら

HTML

<div class="sliderArea w300">
  <div class="vertical-center-3 slider">
    <div><img src="https://125naroom.com/demo/img/itukanokotonokoto01.jpg" alt="125naroom"></div>
    <div><img src="https://125naroom.com/demo/img/itukanokotonokoto02.jpg" alt="125naroom"></div>
    <div><img src="https://125naroom.com/demo/img/itukanokotonokoto03.jpg" alt="125naroom"></div>
    <div><img src="https://125naroom.com/demo/img/itukanokotonokoto04.jpg" alt="125naroom"></div>
    <div><img src="https://125naroom.com/demo/img/itukanokotonokoto05.jpg" alt="125naroom"></div>
  </div>
</div>

jQuery

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

サンプルページはこちら

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

See the Pen
【jQuery】スライダープラグイン「slick」垂直スライドモード(縦方向に)、4枚の画像を表示(2枚ずつスライド)
by 125naroom (@125naroom)
on CodePen.

HTMLとjQueryはこちら

HTML

<div class="sliderArea w300">
  <div class="vertical-center-4 slider">
    <div><img src="https://125naroom.com/demo/img/itukanokotonokoto01.jpg" alt="125naroom"></div>
    <div><img src="https://125naroom.com/demo/img/itukanokotonokoto02.jpg" alt="125naroom"></div>
    <div><img src="https://125naroom.com/demo/img/itukanokotonokoto03.jpg" alt="125naroom"></div>
    <div><img src="https://125naroom.com/demo/img/itukanokotonokoto04.jpg" alt="125naroom"></div>
    <div><img src="https://125naroom.com/demo/img/itukanokotonokoto05.jpg" alt="125naroom"></div>
  </div>
</div>

jQuery

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

サンプルページはこちら

9. 可変幅のスライド(スライドの幅をバラバラにする)

See the Pen
【jQuery】スライダープラグイン「slick」可変幅のスライド(スライドの幅をバラバラにする)
by 125naroom (@125naroom)
on CodePen.

HTMLとjQueryはこちら

HTML

<div class="sliderArea">
  <div class="variable slider">
    <div><img src="https://125naroom.com/demo/img/itukanokotonokoto01_500.jpg" alt="125naroom"></div>
    <div><img src="https://125naroom.com/demo/img/itukanokotonokoto02_300.jpg" alt="125naroom"></div>
    <div><img src="https://125naroom.com/demo/img/itukanokotonokoto03_600.jpg" alt="125naroom"></div>
    <div><img src="https://125naroom.com/demo/img/itukanokotonokoto04_800.jpg" alt="125naroom"></div>
    <div><img src="https://125naroom.com/demo/img/itukanokotonokoto05_350.jpg" alt="125naroom"></div>
  </div>
</div>

jQuery

$(document).on('ready', function() {
  $(".variable").slick({
    dots: true, // ドットインジケーターの表示
    infinite: true, // スライドのループを有効にするか
    variableWidth: true // 可変幅のスライド(スライドの幅をバラバラにするか)
  });
});

サンプルページはこちら

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

See the Pen
【jQuery】スライダープラグイン「slick」画面幅いっぱいに並べてスライド(企業サイトでよく見かけますね)
by 125naroom (@125naroom)
on CodePen.

きのこさん
横幅いっぱいにならないなー
きのこさん
slick-list要素に「overflow: visible;」を指定することで横幅いっぱいになりますー
HTMLとjQueryはこちら

HTML

<div class="sliderArea">
  <div class="full-screen slider">
    <div><img src="https://125naroom.com/demo/img/itukanokotonokoto01.jpg" alt="125naroom"></div>
    <div><img src="https://125naroom.com/demo/img/itukanokotonokoto02.jpg" alt="125naroom"></div>
    <div><img src="https://125naroom.com/demo/img/itukanokotonokoto03.jpg" alt="125naroom"></div>
    <div><img src="https://125naroom.com/demo/img/itukanokotonokoto04.jpg" alt="125naroom"></div>
    <div><img src="https://125naroom.com/demo/img/itukanokotonokoto05.jpg" alt="125naroom"></div>
  </div>
</div>

jQuery

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

サンプルページはこちら

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

See the Pen
【jQuery】スライダープラグイン「slick」ドットインジケーターをお洒落にしてみる
by 125naroom (@125naroom)
on CodePen.

HTMLとjQueryはこちら

HTML

<div class="sliderArea">
  <div class="full-screen-o slider">
    <div><img src="https://125naroom.com/demo/img/itukanokotonokoto01.jpg" alt="125naroom"></div>
    <div><img src="https://125naroom.com/demo/img/itukanokotonokoto02.jpg" alt="125naroom"></div>
    <div><img src="https://125naroom.com/demo/img/itukanokotonokoto03.jpg" alt="125naroom"></div>
    <div><img src="https://125naroom.com/demo/img/itukanokotonokoto04.jpg" alt="125naroom"></div>
    <div><img src="https://125naroom.com/demo/img/itukanokotonokoto05.jpg" alt="125naroom"></div>
  </div>
</div>

jQuery

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

サンプルページはこちら

12. 1枚目のスライド画像だけ表示時間(秒数)を長くする

See the Pen
【jQuery】スライダープラグイン「slick」画面幅いっぱいに並べてスライド(1枚目のスライド画像だけ表示時間(秒数)を長くする)を変更する)
by 125naroom (@125naroom)
on CodePen.

HTMLとjQueryはこちら

HTML

  <div class="sliderArea">
    <div class="full-screen_one slider">
      <div><img src="https://125naroom.com/demo/img/itukanokotonokoto01.jpg" alt="125naroom"></div>
      <div><img src="https://125naroom.com/demo/img/itukanokotonokoto02.jpg" alt="125naroom"></div>
      <div><img src="https://125naroom.com/demo/img/itukanokotonokoto03.jpg" alt="125naroom"></div>
      <div><img src="https://125naroom.com/demo/img/itukanokotonokoto04.jpg" alt="125naroom"></div>
      <div><img src="https://125naroom.com/demo/img/itukanokotonokoto05.jpg" alt="125naroom"></div>
    </div>
  </div>

jQuery

$(document).on('ready', 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, nextSlide) {
    switch (currentSlide){
      case 0:
        // 1枚目のスライド
        $(this).slick("slickSetOption", "autoplaySpeed", 10000);
        break;
      default:
        // その他のスライド
        $(this).slick("slickSetOption", "autoplaySpeed", 3500);
        break;
    }
  });
});

サンプルページはこちら

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/1.11.3/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イメージの読み込みが失敗した後に発生

メモ

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

jQuery日本語リファレンス

jQuery(英語版)

さいごに

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

関連記事

【jQuery】slick を使ってスライドショー(横幅いっぱい+前後のスライドを半透明にする)

【JavaScript】スワイプができるlightbox系プラグイン『PhotoSwipe』の実装サンプル集

デザインのこと - Web design gallery
いつかのこと

おすすめ

Googleさんのおすすめ

Googleさんのおすすめ

デザインの記事

岡村鞄製作所|鞄の販売・修理 – 群馬県高崎市
岡村鞄製作所|鞄の販売・修理 – 群馬県高崎市
あったらいいなと思うもの/窓の家と生活
『未来のミライ』、何度も見てしまう