Images are cut with Slick Slider

Question

Using adaptiveHeight option crops the carousel images. Kindly note I need to keep lazyLoad.

Is this a bug? I have noticed that after the slide loads, if I resize the window, then the slide image fully shows.

Sample code is available here & down below: https://jsfiddle.net/0fn6hLtd

html:

<div class="slider">
  <div>
    <div class="image">
      <img data-lazy="https://via.placeholder.com/560x150"/>
    </div>
  </div>
  <div>
    <div class="image">
      <img data-lazy="https://via.placeholder.com/560x65"/>
    </div>
  </div>
  <div>
    <div class="image">
      <img data-lazy="https://via.placeholder.com/560"/>
    </div>
  </div>
  <div>
    <div class="image">
      <img data-lazy="https://via.placeholder.com/560x200"/>
    </div>
  </div>
</div>

setup:

$('.slider').slick({
  autoplay: true,
  lazyLoad: 'ondemand',
  infinite: true,
  dots:true,
  autoplaySpeed: 3000,
  speed: 300,
  slidesToShow: 1,
  adaptiveHeight: true
});

Answer 1

If using lazyloader, define img height and width attributes so slick can pull values on initialization.

$('.slider').slick({
  autoplay: true,
  lazyLoad: 'ondemand',
  infinite: true,
  dots:true,
  autoplaySpeed: 3000,
  speed: 300,
  slidesToShow: 1,
  adaptiveHeight: true
});

.slider {
  width: 560px;
  margin: 0 auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

<h2>Slick Slider image is cropped with adaptiveHeight option. Clear cache to see it in action</h2>
<div class="slider">
  <div>
    <div class="image">
      <img data-lazy="https://via.placeholder.com/560x150" height="150" width="560"/>
    </div>
  </div>
  <div>
    <div class="image">
      <img data-lazy="https://via.placeholder.com/560x65" height="65" width="560"/>
    </div>
  </div>
  <div>
    <div class="image">
      <img data-lazy="https://via.placeholder.com/560" height="560" width="560" />
    </div>
  </div>
  <div>
    <div class="image">
      <img data-lazy="https://via.placeholder.com/560x200" width="560" height="200" />
    </div>
  </div>
</div>