圆滑的轮播淡入淡出与不同大小的图像

Question

我正在尝试使用带有淡入淡出设置的Slick轮播，以幻灯片形式显示网站首页的图片。 幻灯片放映中的图像具有两种不同的尺寸比例（一个用于垂直图像，另一个用于水平图像）。 当幻灯片从较大的图像循环到较小的图像而不是平滑消失时，第一个图像的多余宽度会粘住，然后消失。

这是我正在使用的代码的基本示例。 您可以在此小提琴中查看结果https://jsfiddle.net/m4ug5o09/

HTML：

<div class="fade">
    <div>
        <img src="http://placehold.it/900x400/000">
    </div>
    <div>
        <img src="http://placehold.it/700x400/">
    </div>
</div>

JS

$('.fade').slick({
dots: false,
infinite: true,
speed: 700,
autoplay: true,
fade: true,
autoplaySpeed: 3000,
arrows: false,
slidesToShow: 1,
slidesToScroll: 1});

此外，当我加载页面时，初始图像会在页面底部快速真实闪烁（就像在页脚中一样）。

有想法吗？

Answer 1

我不确定是否可以通过调整滑动设置来解决此问题。 但是，如果您有兴趣，可以采取一种解决方法。

为包含水平图像的div添加一个ID。

<div>
  <img src="900x400.jpg"/>
</div>

<div id="horizontal">
  <img src="700x400.jpg"/>
</div>

然后在css部分中提及如下内容：

#horizontal
{
  background-color:white;
  width:900px;  // Width equal to the widest image in your slideshow
  height:700px;  // Height equal to the image of max height in your slideshow
}