Проблема со Slick slider в попапе

Question

Сделал slick slider в попапе. При первом вызове попапа открывается вот так (тексты всех 7 элементов слайдера сливаются в один и вообще не понятно как себя ведут)

При первом действии со слайдером за картинкой идёт не другая картинка, а ничего

После первого действия всё приходит в норму (текст отображается нормально, вращение элементов происходит нормально)

Как исправить эту проблему?

Код слайдера:

//Попап
$("img.add-basket__color-zoom").click(function (event) {
    event.preventDefault();
    $("#shadow-dark-2").fadeIn(297, function () {
        $("#add-basket__color-window")
            .css("display", "block")
            .animate({ opacity: 1 }, 198);
        $("div.container")
            .css("margin", "0");
    });
  });

  $("#add-basket__color-close, #shadow-dark-2").click(function () {
      $("#add-basket__color-window").animate({ opacity: 0 }, 198, function () {
          $(this).css("display", "none");
          $("#shadow-dark-2").fadeOut(297);
        $("div.container")
          .css("margin", "0 8px");
      });
  });

//Слайдер
$(".add-basket__color-slider").on(`init reInit`, function (event, slick) {
    $(".detail-page__dots-color").text(1 + " / " + slick.slideCount);
  });
  $(".add-basket__color-slider").on(
    `afterChange`,
    function (event, slick, currentSlide, nextSlide) {
      $(".detail-page__dots-color").text(currentSlide + 1 + " / " + slick.slideCount);
    }
  );
  $(".add-basket__color-slider").slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    dots: false,
    dotsClass: ".detail-page__dots-color",
  });

#shadow-dark-2 {
    z-index: 39;
    position: fixed;
    background: rgba(0,0,0,1);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    cursor: pointer;
    display: none;
}

#add-basket__color-window {
  width: 100%;
  max-height: 350px;
  border-radius: 4px;
  background: transparent;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  margin: auto;
  display: none;
  opacity: 0;
  z-index: 50;
  text-align: center;
}

#add-basket__color-window img {
max-width: 414px;
}

#add-basket__color-close {
  width: 21px;
  height: 21px;
  position: absolute;
  font-size: 40px;
  left: 10px;
  cursor: pointer;
  display: block;
  color: #fff;
}

.color-slider__item img {
  margin-bottom: 20px;
}


.slider__item-color {
  color: #fff;
  font-size: 20px;
}

#add-basket__color-window .new {
  margin-left: auto;
  margin-right: auto;
  margin-top: 15px;
  margin-bottom: 5px;
  color: #cc7240;
  font-size: var(--section-title);
  line-height: 16px;
  font-size: 24px;
}

<div id="shadow-dark-2">
      <span id="add-basket__color-close">ₓ</span>
      <div class="detail-page__dots-color detail-page__slide-dots"></div>
</div>
<img src="img/maximize.svg" class="add-basket__color-zoom">
<div id="add-basket__color-window">
        <div class="add-basket__color-slider">
          <div class="color-slider__item">
              <img src="img/20.jpg" alt="Цвет" />
              <div class="color-slider__item-content">
                <div class="slider__item-color">розовый</div>
                <div class="new">10 500 тг</div>
              </div>  
          </div>
          <div class="color-slider__item">
            <img src="img/19.jpg" alt="Цвет" />
            <div class="color-slider__item-content">
              <div class="slider__item-color">розовый</div>
              <div class="new">10 500 тг</div>
            </div>  
          </div>
          <div class="color-slider__item">
            <img src="img/18.jpg" alt="Цвет" />
            <div class="color-slider__item-content">
              <div class="slider__item-color">розовый</div>
              <div class="new">10 500 тг</div>
            </div>  
          </div>
          <div class="color-slider__item">
            <img src="img/17.jpg" alt="Цвет" />
            <div class="color-slider__item-content">
              <div class="slider__item-color">розовый</div>
              <div class="new">10 500 тг</div>
            </div>  
          </div>
          <div class="color-slider__item">
            <img src="img/16.jpg" alt="Цвет" />
            <div class="color-slider__item-content">
              <div class="slider__item-color">розовый</div>
              <div class="new">10 500 тг</div>
            </div>  
          </div>
          <div class="color-slider__item">
            <img src="img/15.jpg" alt="Цвет" />
            <div class="color-slider__item-content">
              <div class="slider__item-color">розовый</div>
              <div class="new">10 500 тг</div>
            </div>  
          </div>
          <div class="color-slider__item">
            <img src="img/12.jpg" alt="Цвет" />
            <div class="color-slider__item-content">
              <div class="slider__item-color">розовый</div>
              <div class="new">10 500 тг</div>
            </div>  
          </div>
        </div>
      </div>

БЛОГ НА HUSL

Проблема со Slick slider в попапе

Ответы (0 шт):