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

Question

我使用灵活的jquery旋转木马库来显示延迟加载的单个图像。

图像是加载和显示OK，他们是与屏幕水平和居中水平。

我面临的问题是，我无法使图像缩小到适合屏幕垂直(当它们大于屏幕高度)，也不能使它们垂直中心(当它们比屏幕高度短)。

理想的情况下，我希望巧妙地将自己与父母的div相匹配。

    $(document).ready(function() {

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

    });

我这里有个JS密码..。JS加密码

Answer 1

如果我把你的问题说对了，你想要光滑的旋转木马来适应图像的高度。

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

下面是工作中的小提琴：http://jsfiddle.net/gfspwcyo/17/