Question

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

图像正在加载并显示OK，它们正在水平安装屏幕并水平居中。

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

理想情况下，我希望Slick能够适应父级div。

    $(document).ready(function() {

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

    });

我这里有一个JS小提琴代码...... JS Fiddle code

Answer 1

如果我的问题正确，您希望Slick旋转木马适应图像的高度。

为此，您可以编辑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/

光滑的旋转木马图像垂直安装在屏幕上而不是垂直居中

1 个答案: