lazyLoad

遅延読み込みの方法を指定します。 ondemandまたは、progressiveを指定することができます。 ondemandはスライドするとすぐに画像を読み込みます。 progressiveはページが読み込まれた後に非表示の画像を読み込みます。

• 初期値 : linear
• type : string

$('.slider').slick({
  lazyLoad: 'linear',
  useCSS: false,
});

デモ

ondemandはスライドした時に画像を読み込みます。 progressiveはページ読み込みが完了した後に画像を読み込みます。
(画像の読み込み状況はdeveloperツール等で確認してください。)

ondemand

progressive

JavaScript

$(document).ready(function(){
  $('.slider1').slick({
    lazyLoad: 'ondemand',
  });
  $('.slider2').slick({
    lazyLoad: 'progressive',
  });
});

HTML

<div class="slider1">
  <div class="image">
    <img data-lazy="../img/1.jpg">
  </div>
  <div class="image">
    <img data-lazy="../img/2.jpg">
  </div>
  <div class="image">
    <img data-lazy="../img/3.jpg">
  </div>
  <div class="image">
    <img data-lazy="../img/4.jpg">
  </div>
</div>
<div class="slider2">
  <div class="image">
    <img data-lazy="../img/5.jpg">
  </div>
  <div class="image">
    <img data-lazy="../img/6.jpg">
  </div>
  <div class="image">
    <img data-lazy="../img/7.jpg">
  </div>
  <div class="image">
    <img data-lazy="../img/8.jpg">
  </div>
</div>

CSS

.slick-prev:before,
.slick-next:before {
  color: #000 !important;
}

.slider1 img,
.slider2 img {
  width: 100%;
}

.slider1 .image,
.slider2 .image {
  margin: 10px;
}