slickでスライドショー（バリエーションその２）

遅延読み込みオプション

jQueryのスライダープラグインslickで画像スライダーを作るの続き。今度は画像を遅延読み込みするオプション。 DEMO画像の枚数を9枚にして、３枚表示で１枚ずつスライドにしてある。

HTMLのimgタグで、ｓｒｃ属性ではなく、data-lazy="画像ファイルのパス"と書くところがミソらしい。この設定さえしてあれば、実はjs側のオプションにlazyLoadが無くてもOKだがサンプルでは明記してある。

cssは前回と同じで、htmlは画像を９枚に減らした。bodyタグ内、imgタグ周辺の変更箇所のみ載せる。

[sample07.html]

<body>
  <div id="main">
    <ul class="slick-slider">
      <li class="slick-item"><a href="#"><img class="sample-img" data-lazy="./images/001.jpg"></a></li>
      <li class="slick-item"><a href="#"><img class="sample-img" data-lazy="./images/002.jpg"></a></li>
      <li class="slick-item"><a href="#"><img class="sample-img" data-lazy="./images/003.jpg"></a></li>
      <li class="slick-item"><a href="#"><img class="sample-img" data-lazy="./images/004.jpg"></a></li>
      <li class="slick-item"><a href="#"><img class="sample-img" data-lazy="./images/005.jpg"></a></li>
      <li class="slick-item"><a href="#"><img class="sample-img" data-lazy="./images/006.jpg"></a></li>
      <li class="slick-item"><a href="#"><img class="sample-img" data-lazy="./images/007.jpg"></a></li>
      <li class="slick-item"><a href="#"><img class="sample-img" data-lazy="./images/008.jpg"></a></li>
      <li class="slick-item"><a href="#"><img class="sample-img" data-lazy="./images/009.jpg"></a></li>
    </ul>
  </div>
</body>

[sample07.js]

$(function() {
  $('.slick-slider').slick({
    dots: true,
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1,
    speed: 800,
    lazyLoad: 'ondemand'
  });
});

DEMO: sample07

speedオプションを800にして少し遅目にスライドするようにした(defaultは300)。クリックすると次の画像が少しフワッと出てくる。ただ、ブラウザのキャッシュのせいなのか、何度もスライドさせていくと効果が薄くなる。 lazyLoadオプションのセット値は、 'ondemand' または 'progressive'。default値は'ondemand'。

可変幅サイズオプション

variableWidthオプションで、幅の違う画像のスライドができる。

ここでは前のサンプルの9枚の画像を、高さを揃えて幅を変えたものに加工した。

このvariableWidthオプションを指定せずにスライドを作るとこんな変なものになる。

[sample08.js]

$(function() {
  $('.slick-slider').slick({
    dots: true,
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1,
    speed: 500,
    centerMode: true,
    variableWidth: true
  });
});

centerMode で、アクティブな画像を中心に表示。 variableWidth で、幅の違う画像の高さを揃えて表示する。

DEMO: sample08

高さの可変サイズオプション

adaptiveHeightオプションを true に指定すると、高さの違う画像のスライダーが作れる。

[sample09.js]

$(function() {
  $('.slick-slider').slick({
    dots: true,
    infinite: true,
    slidesToShow: 1,
    speed: 500,
    adaptiveHeight: true
  });
});

DEMO: sample09