slick slider won't always load first time

Question

i have an active site with 3 slick sliders on one page, usually the slick doesn't initialise and instead i just see all the images, sometimes if i refresh they all start working.

https://au.hairandme.com.au/collections/all/products/hair-rejuvenation-treatment

is the page in question.

 ( function($) {
$.noConflict();
  $(document).ready(function() { 
  $('.HEROSLIDE').slick({
    autoplay: true,
  autoplaySpeed: 2000,
    pauseOnFocus: false,
  });

  $('.HEROSLIDEMOBILE').slick({
    autoplay: true,
  autoplaySpeed: 2000,
    pauseOnFocus: false,
  });
    $('.benefits-slider').slick({
  centerMode: true,
  centerPadding: '60px',
  slidesToShow: 3,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        arrows: true,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 3
      }
    },
    {
      breakpoint: 768,
      settings: {
        arrows: true,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        arrows: true,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 1
      }
    }
  ]
});

$('.accordion').accordion({
defaultOpen: '',
cookieName: 'accordion_nav'
});
});
    } ) ( jQuery );

Idiophone

Still happens 2 years on... – Meanly

This Slick Slider brought me a lot of problems for the last years. I apreciate it's free and there's people behind but it failed me too many times so I'm changing it for something else. – Lavin

Answer 1

In my case, with 4 slick sliders on one page, the problem was the same, and it's the end of 2019 :) but I fixed it with removing property 'adaptiveHeight', which this slider had. So, according to my problem, maybe you need also to check each property by comment on it

Wethington

Answer 2

For someone who still encounter this problem:

I've noticed that for my sliders this problem only occurs, when the number of slides is less OR equal than the number of slides in slidesToShow parameter in slick settings.

So, for example if my settings are:

$('.article_gallery_slider').slick({
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 3
});

than I have to have at least 4 slides in order for them to appear correctly on first loading of a page.

For some sliders it doesn't really matter and I haven't had the time to investigate why, but I hope this info will help you with those sliders that work incorrectly

Lynxeyed