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

【jQuery】スライダープラグイン「slick」実装サンプル集
きのこさん
slick（スリック）の使い方をまとめてくださいー
きのこさん
わかりましたー

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

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枚の画像を表示、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枚ずつスライド

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 // スクロールするスライド数を設定
  });
});
サンプルページはこちら

サムネイル付き

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 // スクロールするスライド数を設定
  });  
});
サンプルページはこちら

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

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 // スライドを中心に表示して部分的に前後のスライドが見えるように設定（奇数番号のスライドに使用）
  });
});
サンプルページはこちら

垂直スライドモード（縦方向に）、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 // スクロールするスライド数を設定
  });
});
サンプルページはこちら

垂直スライドモード（縦方向に）、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 // スクロールするスライド数を設定
  });
});
サンプルページはこちら

垂直スライドモード（縦方向に）、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 // スクロールするスライド数を設定
  });
});
サンプルページはこちら

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

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 // 可変幅のスライド（スライドの幅をバラバラにするか）
  });
});
サンプルページはこちら

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

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 // スライドのループを有効にするか
  });
});
サンプルページはこちら

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

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 // スライドのループを有効にするか
  });
});
サンプルページはこちら

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

メモ

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

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

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

さいごに

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

関連記事

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

デザコト

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

2024.7.11

5

/

29

2025

SPONSORED LINK

おすすめの広告です

広告

google

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

カテゴリー

人気記事

【CSS】ハンバーガーメニュー実装サンプル集（クリック時のエフェクトも集めました）
【CSS】ハンバーガーメニュー実装サンプル集（クリック時のエフェクトも集めました）
【jQuery】スライダープラグイン「slick」実装サンプル集
【jQuery】スライダープラグイン「slick」実装サンプル集
【jQuery】アコーディオン実装サンプル10選
【jQuery】アコーディオン実装サンプル10選
【jQuery】ページ内リンクでスムーズスクロール（スクロール位置の調整も簡単にできる）
【jQuery】ページ内リンクでスムーズスクロール（スクロール位置の調整も簡単にできる）
【jQuery】スクロールして表示領域に入ったら要素をアニメーション表示させる『inview.js』の実装サンプル集
【jQuery】スクロールして表示領域に入ったら要素をアニメーション表示させる『inview.js』の実装サンプル集

5

/

29

2025

SPONSORED LINK

おすすめの広告です

広告

google

関連記事

7

/

17

2019

【jQuery】テキストをクリップボードにコピーする方法のあれこれ

クリップボードにコピーする。 簡単かなと思ったけど、とても難しかったです。 ブラウザによって全然挙動が違うことに驚きました。 いろいろ試してみた結果をまとめています。 アドレスをコピーできたらいいなとか、たまにですが あ

...
【jQuery】テキストをクリップボードにコピーする方法のあれこれ

デザインのメモ

7

/

8

2024

【jQuery】Lightboxプラグイン『Colorbox』の実装サンプル集

Lightboxプラグイン『Colorbox』の使い方と、制作に役立つ実装サンプルをまとめてみました。簡単に実装することができるのでおすすめです。（個人的には『PhotoSwipe』をおすすめしますが、jQueryではな

...
【jQuery】Lightboxプラグイン『Colorbox』の実装サンプル集

デザインのメモ

6

/

19

2024

【jQuery】ページ内リンクでスムーズスクロール（固定ヘッダーがあったら）

するする動くと楽しいですねー 固定ヘッダーがある場合はクラスやIDを指定して高さ調整しましょうー JavaScript 固定のヘッダー（ナビ）がある場合はヘッダー分の高さを調整しなければなりません。レスポンシブだと高さが

...
【jQuery】ページ内リンクでスムーズスクロール（固定ヘッダーがあったら）

デザインのメモ

Googleさんの
おすすめ

5

/

29

2025

SPONSORED LINK

おすすめの広告です

広告

google

人気記事

2024.3.1

【CSS】ハンバーガーメニュー実装サンプル集（クリック時のエフェクトも集めました）

ん、ハンバーガー？ 三本線がハンバーガーに見えるからってことらしいですよ クリックエフェクト サンプル集 いろんなハンバーガーメニューのクリック時のエフェクトを作ってみる。動きがわかりやすいようにゆっくり動くように指定。

...
【CSS】ハンバーガーメニュー実装サンプル集（クリック時のエフェクトも集めました）

デザインのメモ

2024.7.11

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

slick（スリック）の使い方をまとめてくださいー わかりましたー よく見かけるスライダー（自動再生） See the Pen 【jQuery】スライダープラグイン「slick」よく見かけるスライダー（自動再生） by

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

デザインのメモ

2024.2.2

【jQuery】アコーディオン実装サンプル10選

jQueryのアコーディオン実装サンプルを作りました。サイト制作でよく使うものをまとめました。 いろいろありますねー いろいろあるのでまとめましたー アコーディオン、シンプル版 See the Pen アコーディオン、シ

...
【jQuery】アコーディオン実装サンプル10選

デザインのメモ

もっと見る

Googleさんの
おすすめ

5

/

29

2025

SPONSORED LINK

おすすめの広告です

広告

google

デザインの記事

ATLETICO SUZUKA CLUB
洗濯機の下
  • 2025.05.28New
  • 洗濯機の下
  • そっとしている場所があります。そっとするのはやめることにしました。 掃除したくても…
  • いつかのこと
【jQuery】タブ切り替え実装サンプル集（上下連動、下タブを押すとスクロールして上に、 外部ページからのリンクIDも可能）