光滑的滑块。为什么从后往前滑动和从前往后滑动时会出现伪影？

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 (source 1, source 2) 上的 CSS 动画存在闪烁。这就解释了为什么即使您切换到不同的滑块插件后问题仍然可见。

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

我可以通过将 -webkit-backface-visibility: hidden 设置为 slick-slide class 来解决问题。

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

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

更新

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

光滑的滑块。为什么从后往前滑动和从前往后滑动时会出现伪影？

Slick slider. Why do artifacts appear when slide from last to first and from first to last?

javascript

css

jquery

slick.js