jQueryスライダー「slick.js」の実装編

jQueryスライダー「slick.js」の基本的な使い方は前回の「使い方とオプション設定」で説明しましたが、今回は実際の制作で役立つ実装編です。

基本的な使い方からオプション設定を利用したスライダーの見せ方など、いくつかご紹介していきますので参考にされてください。

まずは基本的な実装

HTMLJS

<div class="slider_1">
  <div class="item"><img src="img01.jpg"></div>
  <div class="item"><img src="img02.jpg"></div>
  <div class="item"><img src="img03.jpg"></div>
  <div class="item"><img src="img04.jpg"></div>
  <div class="item"><img src="img05.jpg"></div>
  <div class="item"><img src="img06.jpg"></div>
</div>

$(function() {
  $('.slider_1').slick({
    autoplay: true,
    dots: true
  });
});

自動再生を有効化、ドットインジケーターを有効化にしています。
※スライド前後の矢印はデフォルト

表示する画像を2つ

HTMLJS

<div class="slider_2">
  <div class="item"><img src="img01.jpg"></div>
  <div class="item"><img src="img02.jpg"></div>
  <div class="item"><img src="img03.jpg"></div>
  <div class="item"><img src="img04.jpg"></div>
  <div class="item"><img src="img05.jpg"></div>
  <div class="item"><img src="img06.jpg"></div>
</div>

$(function() {
  $('.slider_2').slick({
    autoplay: true,
    slidesToShow: 2,
    dots: true
  });
});

slidesToShowで表示枚数を指定しています。

画像を3つ表示させて２枚ずつスライド

HTMLJS

<div class="slider_3">
  <div class="item"><img src="img01.jpg"></div>
  <div class="item"><img src="img02.jpg"></div>
  <div class="item"><img src="img03.jpg"></div>
  <div class="item"><img src="img04.jpg"></div>
  <div class="item"><img src="img05.jpg"></div>
  <div class="item"><img src="img06.jpg"></div>
</div>

$(function() {
  $('.slider_3').slick({
    autoplay: true,
    slidesToShow: 3,
    slidesToScroll: 2,
    dots: true
  });
});

slidesToShowで表示枚数を指定、slidesToScrollでスライド枚数を指定しています。

アクティブな画像を中央に配置する

HTMLJS

<div class="slider_4">
  <div class="item"><img src="img01.jpg"></div>
  <div class="item"><img src="img02.jpg"></div>
  <div class="item"><img src="img03.jpg"></div>
  <div class="item"><img src="img04.jpg"></div>
  <div class="item"><img src="img05.jpg"></div>
  <div class="item"><img src="img06.jpg"></div>
</div>

$(function() {
  $('.slider_4').slick({
    autoplay: true,
    slidesToShow: 3,
    slidesToScroll: 2,
    dots: true,
    centerMode: true
  });
});

centerModeを設定することで画像が中央寄せで表示することができます。

みこと

あれ？中央に配置するだけでこんな風になるのですか？

camoさん

CSSで調整することでアクティブな画像をより分かりやすくすることが可能なんだ。アクティブな画像にはslick-currentというclassが付与されるのでそれを使用すれば色々なカスタマイズが出来るよ！

サムネイル付きスライダー

HTMLJS

<div class="slider_5">
  <div class="item"><img src="img01.jpg"></div>
  <div class="item"><img src="img02.jpg"></div>
  <div class="item"><img src="img03.jpg"></div>
  <div class="item"><img src="img04.jpg"></div>
  <div class="item"><img src="img05.jpg"></div>
  <div class="item"><img src="img06.jpg"></div>
</div>
<div class="slider_5_thumb">
  <div class="item"><img src="img01.jpg"></div>
  <div class="item"><img src="img02.jpg"></div>
  <div class="item"><img src="img03.jpg"></div>
  <div class="item"><img src="img04.jpg"></div>
  <div class="item"><img src="img05.jpg"></div>
  <div class="item"><img src="img06.jpg"></div>
</div>

$(function() {
  $('.slider_5').slick({
    arrows: false,
    asNavFor: '.slider_5_thumb'
  });
  $('.slider_5_thumb').slick({
    slidesToShow: 4,
    slidesToScroll: 1,
    asNavFor: '.slider_5',
    focusOnSelect: true
  });
});

サムネイル付きのスライダーとして設定する場合、まずは2つのスライダーを設置します。そして、それぞれのスライダーのナビゲーションとなるようasNavForに連動するスライダーのidやclassを指定します。

また、サムネイルとなるスライダーにはサムネイルとして表示させる画像の枚数の設定とfocusOnSelectを有効化してサムネイルをクリックした際に連動してメインスライダーが動くようにします。

camoさん

slidesToShowに設定する枚数を奇数にして、centerModeを有効化にすることでアクティブなサムネイル画像を中央に配置するようにも出来るよ。

垂直方向にスライドさせる

HTMLJS

<div class="slider_6">
  <div class="item"><img src="img01.jpg"></div>
  <div class="item"><img src="img02.jpg"></div>
  <div class="item"><img src="img03.jpg"></div>
  <div class="item"><img src="img04.jpg"></div>
  <div class="item"><img src="img05.jpg"></div>
  <div class="item"><img src="img06.jpg"></div>
</div>

$(function() {
  $('.slider_6').slick({
    autoplay: true,
    dots: true,
    vertical: true,
    verticalSwiping: true,
    centerMode: true
  });
});

verticalとverticalSwipingを有効化にすることで垂直にスライドします。

スマホでは表示枚数を変更する（レスポンシブ対応）

パソコン表示

スマホ表示

デモではパソコンでも簡単にスマホ表示が確認できるようにボタンで切り替えが出来るようにしてあります。実際にスマホで見ていただくと、どちらのボタンを押してもレスポンシブ設定した1枚のみ表示されます。

HTMLJS

<div class="slider_7">
  <div class="item"><img src="img01.jpg"></div>
  <div class="item"><img src="img02.jpg"></div>
  <div class="item"><img src="img03.jpg"></div>
  <div class="item"><img src="img04.jpg"></div>
  <div class="item"><img src="img05.jpg"></div>
  <div class="item"><img src="img06.jpg"></div>
</div>

$(function() {
  $('.slider_7').slick({
    slidesToShow: 3,
    responsive: [{
      breakpoint: 560,
      settings: {
        slidesToShow: 1
      }
    }]
  });
});

responsiveを設定することでレスポンシブが有効になり、breakpointでブレイクポイントを設定してsettingsオブジェクトで各オプションを指定します。
breakpointを複数設定することでパソコン・タブレット・スマホで表示を変えることが可能です。

画面いっぱいに表示させる

コンテンツ幅をはみ出して画面いっぱいにスライダーを設置したい場合がよくあるかと思います。少し分かりづらいですがコンテンツ幅と仮定する箇所に色を付けて分かりやすく表現してあります。

HTMLJS

<div class="window_section">
  <div class="contents_section">
    <div class="slider_8">
      <div class="item"><img src="img01.jpg"></div>
      <div class="item"><img src="img02.jpg"></div>
      <div class="item"><img src="img03.jpg"></div>
      <div class="item"><img src="img04.jpg"></div>
      <div class="item"><img src="img05.jpg"></div>
      <div class="item"><img src="img06.jpg"></div>
    </div>
  </div>
</div>

$(function() {
  $('.slider_8').slick({
    autoplay: true,
    dots: true,
    centerMode: true,
    centerPadding: '5%',
  });
});

みこと

コード通りに設置しても中央設置のスライダーと変わらないのですけど…

camoさん

設置の方法は同じなのだけどポイントは以下の２点！
①slick-list要素をoverflow: visible;に変更すること

②①によってはみ出した要素をウィンドウ幅以上にはみ出さないように親要素にoverflow: hidden;を設定すること

みこと

なるほど！通常はoverflow: hidden;で前後の画像が見えなくなっているだけなんですね。

slickのさまざまな設置方法について

代表的な設置方法をご紹介しましたが、slickスライダーの設置方法はオプションを使用すればまだまだ多くの設置方法があります。どのような設置方法があるのかを把握することでWeb制作の幅が広がります。

あわせて読みたい記事

2022年1月15日jQueryスライダー「slick.js」の使い方とオプション設定