Skip to content

slickプラグインで作るスライダー3種

April 2

・javascript

レスポンシブ対応でオプションで細かくカスタマイズができて便利なスライダーのjQueryプラグイン「slick」。公式サイトのサンプルにはない実装例を3パターンご紹介します。

事前準備

slickの公式サイトからファイルをダウンロードして読み込みます。jQueryも読み込みます。

<link rel="stylesheet" href="slick.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="slick.min.js"></script>

HTMLは下記のものを使用します。全パターン同じです。

<div id="slider">
  <img src="imgs/slide01.jpg" alt="" />
  <img src="imgs/slide02.jpg" alt="" />
  <img src="imgs/slide03.jpg" alt="" />
</div>

矢印をオリジナルデザインに変更する

slickのオプション「prevArrow」「nextArrow」で矢印のHTMLを設定します。例ではimgタグで矢印の画像を表示させます。矢印が生成される位置を変更したい場合はオプション「appendArrows」で設定します。公式サイトによるとSelector, htmlString, Array, Element, jQuery objectのいずれかで指定できます。矢印の表示位置はCSSで調整してください。

$("#slider01").slick({
  prevArrow:
    '<div class="slider-arrow slider-prev"><img src="imgs/arrow_prev.svg" alt="＜"></div>',
  nextArrow:
    '<div class="slider-arrow slider-next"><img src="imgs/arrow_next.svg" alt="＞"></div>',
});

左右の両端に前後のスライダー画像を見せる

公式サイトのサンプルに中央に3つ表示させてその前後を少し見せるようなレイアウトがありますが、サイトのメインビジュアルなどにあるようなウィンドウ幅いっぱいに表示する方法です。

slickのオプション「centerMode」をtrueにすると、左右の両端に前後の画像が見える状態になります。両端に見えている画像の幅を変更したい場合は、オプション「centerPadding」でpxか%で指定できます。

$("#slider02").slick({
  centerMode: true,
});

スライダー画像をアニメーションさせる

例では画像が表示されている間は徐々に拡大し続けるというアニメーションを作成します。アニメーション自体はCSSで設定し、アニメーションと調和するようにスライダーの動きを自動でフェードしながら切り替わるよう設定します。

アニメーションの設定は、現在表示中のスライダー画像（slick-current）にのみアニメーションを適用します。animation-durationの時間を自動での切り替え時間よりも少し長めに設定することで、より滑らかになります。animation-delayをマイナス値にするのは、スライダー画像が表示されるときにはすでにアニメーションが始まっているようにするためです。

.slider03 .slick-current {
  -webkit-animation: increase 6s ease -0.1s infinite;
  animation: increase 6s ease -0.1s infinite;
}
@-webkit-keyframes increase {
  0% {
    -webkit-transform: scale(1, 1);
  }
  100% {
    -webkit-transform: scale(1.2, 1.2);
  }
}
@keyframes increase {
  0% {
    transform: scale(1, 1);
  }
  100% {
    transform: scale(1.2, 1.2);
  }
}

プラグインの設定は、自動切り替えのオプション「autoplay」をtrueに、フェード効果のオプション「fade」をtrueにします。切り替えの時間は「autoplaySpeed」で、フェードの時間は「speed」でそれぞれ調整してください。

$("#slider03").slick({
  autoplay: true,
  autoplaySpeed: 4000,
  speed: 500,
  fade: true,
  arrows: false,
});

デモ

「slickプラグインで作るスライダー3種」のデモはこちら

Tags

jquery how-to