Slick slider not displaying images on first page load?

Question

JavaScript

While working with the slider slick ran into such a problem. When the page is loaded for the first time, the pictures in the slider are not displayed, and if you update it again, then everything is fine. I have another slider embedded in one slider, here is the code:

<div class="slider">
          <div class="slider__wrap">
            <div class="slider__slide">
              <div class="slider-info">
                18+
              </div>
              <img class="slider__img" src="img/slider/slider-1.png" alt="">
              <div class="slider-info__bottom">
                  <div class="slider-info__logo">
                    <img src="img/mini-logo.png" alt="">
                    <p>В кино с 12 сентября</p>
                  </div>
                </div>
            </div>
            <div class="slider__slide">
                <div class="slider-info">
                    18+
                  </div>
              <img class="slider__img" src="img/slider/slider-2.png" alt="">
              <div class="slider-info__bottom">
                <div class="slider-info__logo">
                  <img src="img/mini-logo.png" alt="">
                  <p>В кино с 12 сентября</p>
                </div>
              </div>
            </div>
          </div>
          
          <div class="slider-quote">
            <div class="slider-quote__wrap">
              <div class="slider-quote__slide">
                <div class="quote">
                  <div class="quote__text">никогда не знаешь, что определит</div>
                  <div class="quote__text quote__text--big">твое будущее.</div>
                </div>
              </div>
              <div class="slider-quote__slide">
                <div class="quote">
                  <div class="quote__text">Он направил меня именно туда,</div>
                  <div class="quote__text quote__text--big">где я должен был оказаться.</div>
                  <div class="quote__text">к людям, которые были мне</div>
                  <div class="quote__text quote__text--big">нужны</div>
                </div>
              </div>
            </div>
          </div>

        </div>

here is the jquery code:

$(window).load(function(){
    $('.slider__wrap').slick({
      arrows: true,
      nextArrow: '<div class="arrows-block arrows-block__right"><div class="arrows arrows--next"></div><p class="arrows-text arrows-text--right">Выберите картинку</p></div>',
      prevArrow: '<div class="arrows-block arrows-block__left"><div class="arrows arrows--prev"></div><p class="arrows-text arrows-text--left">Выберите картинку</p></div>',
    });
  
  $('.slider-quote__wrap').slick({
    arrows: true,
    vertical: true,
    nextArrow: '<div class="arrows-block arrows-block--vertical arrows-block--bottom"><div class="arrows arrows--next"></div><p class="arrows-text arrows-text--bottom">Выберите текст</p></div>',
  	prevArrow: '<div class="arrows-block arrows-block--vertical arrows-block--top"><div class="arrows arrows--prev"></div><p class="arrows-text arrows-text--top">Выберите текст</p></div>',
  });

});

I tried unslick, but without results, can anyone tell me why so?

Answer 1

Dude, did you find a solution? I have the same problem

Answer 2

Replace at the beginning: with or Both solutions are equivalent.