2

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

  • Could you explain a bit more about what you mean by "artifacts appear"? Its a beautiful website btw :) – Awad Maharoof Sep 16 '17 at 09:51
  • @AwadMaharoof, thanks :) About artifacts - Idk how they are called right in English, sorry if I'm wrong. Look. When you slide from last to first or from first to last, the white block is blinking for a second. Like that http://prntscr.com/gltnhy –  Sep 16 '17 at 10:32
  • oh that's alright! My answer should help you resolve the blink(flicker) issue – Awad Maharoof Sep 16 '17 at 10:35

2 Answers2

3

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

Awad Maharoof
  • 2,260
  • 1
  • 24
  • 36
  • yeah, you got me right, but it is the same on your updated version :( –  Sep 16 '17 at 10:38
1

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;
}
MKH
  • 56
  • 6