光滑的 slider。 为什么从最后一个滑到最后一个从第一个滑到最后会出现伪影？

Question

Why do artifacts appear when slide from last to first and from first to last? I tried with Swiper slider, but it was the same. Is it because of large images or what? If you deactivate infinity, everything will be okay, but I need infinity.

Here is the JS-code:

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

Ok, I'm going to assume you were referring to the flicker of the image when switching from the first slide to the last slide.

The reason for this is because of a flicker that exists for CSS animations on webkit ( source 1 , source 2 ). That explains why the issue was still visible even after you switched to a different slider plugin.

I created an updated version of your codepen to work with the solution suggested in the sources I have mentioned above.

I was able to resolve the issue by setting -webkit-backface-visibility: hidden to the slick-slide class.

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

I hope I interpreted your question correctly. Cheers

Update

Seems like this is a problem with the transitions of slick that's been around for quite a while and currently does not have a fix that works for everyone

Answer 2

Old post, but in case it helps anyone, this helped me deal with that flashing:

.slick-slider .slick-track,
.slick-slider .slick-list
{
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
transition-delay: 10ms;
}