Question

我正在尝试使用CSS变换来使旋转木马中的中心对象更受关注。（Carousel是Slick.js）

一切都很好，除非我从最后一个项目回到第一个项目，在更改出现之前有暂停和跳转。

造成这种情况的原因是什么？我该如何解决？

//pseudo code

编辑：从第一个到最后一个也是如此。

编辑2：值得注意的是，我从Slick.js网站上了解了这个想法：http://kenwheeler.github.io/slick/

在带有“中心模式”示例的页面上，它正在使用转换来完成这一操作。我不能为我的生活弄清楚除了目标元素之外还有什么不同。

编辑3：我确实尝试将元素更改为H3元素，如示例中所示。没有变化。

Answer 1

原因是当从“first to last”切换时，Slick会更改幻灯片元素的DOM顺序。当删除dom元素并将其添加回来时，转换不会启动...您可以通过使用javascript和Slicks beforeChange和afterChange事件而不是纯CSS解决方案来解决此问题。我做了一个例子，虽然我做的例子也略微改变了效果（中心幻灯片不会变宽，直到它在中心，例如afterChange）。也许使用Slicks，下一个和之前的幻灯片参数，你可以让它像你的例子一样工作，没有时间进行更多调查。

https://jsfiddle.net/6d91cqoq/2/

对您的示例所做的更改：

//Added my own "active" class, so it does not to interfere with slicks active class
.slick-slide.active {
  opacity: 1;
  transform: scale(1.50);
}

JS

//make current center active after initialization
$('.slick-center').addClass('active');

//before slide change, make all "inactive"
$('.center').on('beforeChange', function(event, slick, index){
  $('.slick-slide').removeClass('active');
});

//after change make the center one "active"
$('.center').on('afterChange', function(event, slick, index){
  $(slick.$slides[index]).addClass('active');
});

光滑轮播重复错误

1 个答案: