使用 Slick Slider 剪切图像

Question

使用 adaptiveHeight 选项裁剪旋转木马图像。请注意，我需要保留 lazyLoad.

这是一个错误吗？我注意到在加载幻灯片后，如果我调整 window 的大小，则幻灯片图像会完全显示。

示例代码可在此处和下方获得：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>

设置:

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

Answer 1

如果使用 lazyloader，请定义 img 高度和宽度属性，以便 slick 可以在初始化时提取值。

$('.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/slick-carousel@1.8.1/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>

使用 Slick Slider 剪切图像

Images are cut with Slick Slider

html

jquery

css

carousel

slick.js