在具有可变宽度和中心模式的光滑滑块中跳跃幻灯片
Jumping slides in slick slider with variable width and center mode
我正在使用灵活的滑块在我的网站上显示一个居中的滑块。
滑块应在中央显示一个项目,并在左右显示较小的项目。
为此,我使用了 centerMode
和 variableWidth
。
现在的问题是,每次更改后幻灯片都是 "jumping"。
在文档中看起来不错。我的错误是什么?
唯一的问题是您有两个不同的图像高度,无论其父幻灯片是否有中心 class。
.slider-header .slick-slide img {height: 520px; [...]}
.slider-header .slick-slide.slick-center img {height: 600px; [...]}
使它们相同,您的问题就消失了;)
如果你给 .slick-track 一些 CSS 动画过渡效果很好。
.slick-track { transition: all 0.3s ease; }
我正在使用灵活的滑块在我的网站上显示一个居中的滑块。 滑块应在中央显示一个项目,并在左右显示较小的项目。
为此,我使用了 centerMode
和 variableWidth
。
现在的问题是,每次更改后幻灯片都是 "jumping"。
在文档中看起来不错。我的错误是什么?
唯一的问题是您有两个不同的图像高度,无论其父幻灯片是否有中心 class。
.slider-header .slick-slide img {height: 520px; [...]}
.slider-header .slick-slide.slick-center img {height: 600px; [...]}
使它们相同,您的问题就消失了;)
如果你给 .slick-track 一些 CSS 动画过渡效果很好。
.slick-track { transition: all 0.3s ease; }