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
}

光滑的旋转木马褪色粘贴不同大小的图像

1 个答案: