Question

我试图创建一个图像轮播式系统，它一次显示多个图像;除了在这些图像之间滑动，图像褪色。

因此，例如，可能会显示5张图像，然后经过一段时间（比如说3秒）后，它们会立即淡入下一张5张图像。

我试图使用Slick Carousel实现这一目标，但默认情况下该行为不可用 - 您可以轻松淡化一个元素，但只要您想显示多个图像，它就不会工作。

有些人遇到了类似的问题，并使用Slick Carousel尝试过解决方案，但是没有一个是正确的。

这是一个jsfiddle - http://jsfiddle.net/22e6q2rt/ - 显示我到目前为止的进展。这种作品，但过渡并不是很好。我喜欢一个漂亮的交叉淡入淡出，其中一组图像淡出而下一组淡入。这是代码：

$('.multipleslider').slick({ 
dots: false, 
infinite: true, 
speed: 0, 
slidesToShow: 3, 
autoplay: true,
autoplaySpeed: 1400,
slidesToScroll: 3, 
cssEase: 'linear' 
});


.slick-slide {
   opacity: .5;
   transition: opacity .5s ease-in-out;
}
div.slick-current {
   opacity: 1;
   transition: opacity .5s ease-in-out;
}

div.slick-active{
   opacity: 1;
   transition: opacity .5s ease-in-out;
}

我不介意这个系统是一个独立的jquery / javascript解决方案，还是使用现有的javascript插件，比如Slick或Owl Carousel ...但是它们都不合适，而且我还没有撞墙了！任何帮助都会很棒，谢谢。

Answer 1

尝试使用光滑滑块对象中的计时功能。我在这里为你改变了

$('.multipleslider').slick({ 
dots: false, 
infinite: true, 
speed: 1000, 
slidesToShow: 3, 
autoplay: false,
autoplaySpeed: 1400,
slidesToScroll: 3, 
cssEase: 'ease-in' 
});

我将自动播放更改为false并将速度提高到1000，我猜这是几毫秒。最重要的是，您可以使用cssEase轻松进入，轻松，轻松，立方贝塞尔等。

Answer 2

这是一个反应流畅的例子，其中多个元素几乎褪色并且看起来很相似：

carousal

month_index = ['032020', '032020', '032020', '032020', '032020', '032020', '032020', '032020', '032020', '032020', '032020', '032020', '032020', '032020', '032020', '032020', '042020', '042020', '042020', '042020', '042020', '042020', '042020', '042020', '042020', '042020', '042020', '042020', '042020', '042020', '042020', '042020', '042020', '042020', '042020', '042020', '042020', '042020', '042020', '042020', '042020', '042020', '042020', '042020', '042020', '042020', '052020', '052020', '052020', '052020', '052020', '052020', '052020', '052020', '052020', '052020', '052020', '052020', '052020', '052020', '052020', '052020', '052020', '052020', '052020', '052020', '052020', '052020', '052020', '052020', '052020', '052020', '052020', '052020', '052020', '052020', '052020', '062020', '062020', '062020', '062020', '062020', '062020', '062020', '062020', '062020', '062020', '062020', '062020', '062020', '062020', '062020', '062020', '062020', '062020', '062020', '062020', '062020', '062020', '062020', '062020', '062020', '062020', '062020', '062020', '062020', '062020', '072020', '072020', '072020', '072020', '072020', '072020', '072020', '072020', '072020', '072020', '072020', '072020', '072020', '072020', '072020', '072020', '072020', '072020', '072020', '072020', '072020', '072020', '072020', '072020', '072020', '072020', '072020', '072020', '072020', '072020', '072020', '082020', '082020', '082020', '082020', '082020', '082020', '082020', '082020', '082020', '082020', '082020', '082020', '082020', '082020', '082020', '082020', '082020', '082020', '082020', '082020', '082020', '082020', '082020', '082020', '082020', '082020', '082020', '082020', '082020', '082020', '082020', '092020', '092020', '092020', '092020', '092020', '092020', '092020', '092020', '092020', '092020', '092020', '092020', '092020', '092020', '092020', '092020', '092020', '092020', '092020', '092020', '092020', '092020', '092020', '092020', '092020', '092020', '092020', '092020', '092020', '092020', '102020', '102020', '102020', '102020', '102020', '102020', '102020', '102020', '102020', '102020', '102020', '102020', '102020', '102020', '102020', '102020', '102020', '102020', '102020', '102020', '102020', '102020', '102020', '102020', '102020', '102020', '102020', '102020', '102020', '102020', '102020', '112020', '112020', '112020', '112020', '112020', '112020', '112020', '112020', '112020', '112020', '112020', '112020', '112020', '112020', '112020', '112020', '112020', '112020', '112020', '112020', '112020', '112020', '112020', '112020', '112020', '112020', '112020', '112020', '112020', '112020', '122020', '122020', '122020', '122020', '122020', '122020', '122020', '122020', '122020', '122020', '122020', '122020', '122020', '122020', '122020', '122020', '122020', '122020', '122020', '122020', '122020', '122020', '122020', '122020', '122020', '122020', '122020', '122020', '122020', '122020', '122020', '012021', '012021', '012021', '012021', '012021', '012021', '012021', '012021', '012021', '012021']

date_unique = ['032020', '042020', '052020', '062020', '072020', '082020', '092020', '102020', '112020', '122020', '012021']

淡化多个元素 - 如旋转木马，但淡化所有元素而不是滑动

2 个答案: