Question

为什么从最后一个到第一个以及从头到尾滑动时会出现工件？我尝试使用Swiper滑块，但它是一样的。是因为大图像还是什么？如果你停用无限，一切都会好的，但我需要无穷大。

这是JS代码：

var simpleSliderInner = $(".simple-slider__inner");

simpleSliderInner.slick({
  prevArrow: "<button class=\"simple-slider__arrow simple-slider__arrow_prev\">" +
  "<svg class=\"icon icon_sprite_arrow_slider\">" +
  "<use xmlns:xlink=\"http://www.w3.org/1999/xlink\" xlink:href=\"#sprite_arrow_slider\"></use>" +
  "</svg>" +
  "</button>",
  nextArrow: "<button class=\"simple-slider__arrow simple-slider__arrow_next\">" +
  "<svg class=\"icon icon_sprite_arrow_slider\">" +
  "<use xmlns:xlink=\"http://www.w3.org/1999/xlink\" xlink:href=\"#sprite_arrow_slider\"></use>" +
  "</svg>" +
  "</button>",
  dots: true,
  dotsClass: "simple-slider__dots",
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        arrows: false
      }
    }
  ]
});

Here is codepen.

Here is website

Answer 1

好的，我会假设你指的是从第一张幻灯片切换到最后一张幻灯片时图像的闪烁。

原因是因为webkit上的CSS动画存在闪烁（source 1，source 2）。这就解释了为什么即使你切换到另一个滑块插件后问题仍然可见。

我创建了一个updated version of your codepen来处理我在上面提到的来源中建议的解决方案。

我可以通过将-webkit-backface-visibility: hidden设置为光滑幻灯片类来解决此问题。

.slick-slide {
    -webkit-backface-visibility: hidden;
}

我希望我能正确地解释你的问题。干杯！

<强>更新

似乎这是a problem with the transitions of slick that's been around for quite a while，目前没有适用于所有人的修复程序

光滑的滑块。为什么从最后一个到第一个以及从头到尾滑动时会出现工件？

1 个答案: