光滑的旋转木马图像不垂直适合屏幕且不垂直居中

Question

我正在使用 Slick jquery 轮播库来显示延迟加载的单个图像。

图像加载和显示正常，它们水平适合屏幕并水平居中。

我遇到的问题是我无法让图像缩小以垂直适合屏幕（当它们大于屏幕高度时）并且无法使它们垂直居中（当它们短于屏幕高度时） .)

理想情况下，我希望 Slick 能够响应式地适应 parent div。

    $(document).ready(function() {

      $('.image-slider').slick({
        lazyLoad: 'ondemand',
        slidesToShow: 1,
        slidesToScroll: 1,
        initialSlide: 1,
        centerMode: true,
        arrows: false,
        dots: true,
      });

    });

我这里有代码的 JS Fiddle... JS Fiddle code

Answer 1

如果我答对了你的问题，你希望 Slick carousel 适应图像的高度。

为此，您可以编辑 Javascript 并添加此行 adaptiveHeight: true
新的 JavaScript 应如下所示：

$(document).ready(function() {
  $('.image-slider').slick({
    lazyLoad: 'ondemand',
    slidesToShow: 1,
    slidesToScroll: 1,
    initialSlide: 1,
    centerMode: true,
    arrows: false,
    dots: true,
    adaptiveHeight: true //add this line
  });
});

这是有效的 jsfiddle：http://jsfiddle.net/gfspwcyo/17/

光滑的旋转木马图像不垂直适合屏幕且不垂直居中

Slick carousel images not fitting on screen vertically and not centered vertically

html

css

jquery

slick.js