光滑的轮播褪色粘着不同尺寸的图像答案

【问题标题】：Slick carousel fade sticking with different sized images光滑的轮播褪色粘着不同尺寸的图像
【发布时间】：2015-04-09 01:34:46
【问题描述】：

我正在尝试使用带有淡入淡出设置的 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>

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

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

想法？

【问题讨论】：

标签： jquery slider zurb-foundation carousel slick.js

【解决方案1】：

我不确定 slick 这个问题是否可以通过调整 slick 设置来解决。但是，如果您有兴趣，可以使用一种解决方法。

为包含水平图像的 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
}

【讨论】：