Slick Slider не подгружает контент во вкладках CSS. Как исправить?

Question

[Yana7777777]

Всем привет!
На сайте есть несколько вкладок, каждая вкладка со своим набором информации - текс и фото.

Переключение вкладок делаю через JS, то есть при клике на label вкладки, подгружаю контент.

Проблема - при загрузке сайта, первая вкладка имеет класс Active, далее после смены вкладок, этот класс подставляется вкладке, на которую нажали.
И если кто-то кликает на другую вкладку, которая не имела изначально класс Active, а он ей добавился в следствии JS добавления класса, то контент от Slick Slider не грузится, пока не нажмешь на кнопку переключения слайда.

Как это исправить?

Код JS переключения вкладок:

$(document).ready(function () {
  // получаем массив всех вкладок
  const tabsYacht = document.querySelectorAll(".label-name-yacht");
  // получаем массив всех блоков с содержимым вкладок
  const contentYacht = document.querySelectorAll(".open-yacht");

  // запускаем цикл для каждой вкладки и добавляем на неё событие
  for (let i = 0; i < tabsYacht.length; i++) {
    tabsYacht[i].addEventListener("click", (event) => {
      // Удаляем активный класс со всех вкладок
      for (let t = 0; t < tabsYacht.length; t++) {
        tabsYacht[t].classList.remove("active-name-yacht");
      }
      // Удаляем активный класс со всех блоков содержимого вкладок
      for (let c = 0; c < contentYacht.length; c++) {
        contentYacht[c].classList.remove("open-yacht-active");
      }

      // Добавляем активный класс только к выбранной вкладке
      event.currentTarget.classList.add("active-name-yacht");

      // Находим соответствующий блок с содержимым по атрибуту data-tab
      const contentIdYacht = event.currentTarget.getAttribute("data-tabYacht");
      const contentBlockYacht = document.querySelector(`[data-contentYacht="${contentIdYacht}"]`);

      // Добавляем активный класс только к выбранному блоку с содержимым
      if (contentBlockYacht) {
        contentBlockYacht.classList.add("open-yacht-active");
      }
    });
  }
});

Код HTML вкладок:

<div class="open-yacht mt60 open-yacht-active" data-contentYacht="2"> 
    <div class="info-yacht">
        <div class="name-yacht mb40">Freedom</div>
        <div class="list-info">

            <div class="item">
                <span class="icon-calendar icon-item"></span>
                <div class="text-item">
                    <div class="name-item">Дата постройки</div>
                    <div class="description-item mt10">2019 год</div>
                </div>
            </div>

            <div class="item">
                <span class="icon-yacht icon-item"></span>
                <div class="text-item">
                    <div class="name-item">Длина/Ширина</div>
                    <div class="description-item mt10">41м / 9м</div>
                </div>
            </div>

        </div>

            <div class="cost-and-order mt40">
                <div class="cost-service">
                    Стоимость от <span>120€</span>
                </div>
                <div class="order-btn mt10">Забронировать</div>
            </div>
    </div>

    <div class="photos-yacht">
        <div class="slider-yacht slider-yacht-02">
        
                    <div class="slide">
                        <img src="img/yacht/freedom/img-01.jpg" alt="" class="media-yacht-big-slider">
                        <div class="title-text-slide">1 - Фронтальная фотография яхты</div>
                        
                        <div class="arrow">
                            <div class="next-slide-title next-slide-03-2">
                                <span class="circle-arrow"><span class="icon-arrow-1"></span></span>
                            </div>
                            <div class="prev-slide-title prev-slide-03-2">
                                <span class="circle-arrow"><span class="icon-arrow-1"></span></span>
                            </div>
                        </div>
                    </div>
        </div>

        <div class="slider-yacht-nav slider-yacht-nav-2 mt40">
                        <div class="slide">
                            <img src="img/yacht/freedom/img-01.jpg" alt="" class="media-yacht-slider-nav">
                        </div>
        </div>
        
    </div>
</div>

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

$(document).ready(function(){
  $('.slider-yacht-02').slick({
      slidesToShow: 1,
      slidesToScroll: 1,
      autoplay: false,
      dots: false,
      infinite: true,
      focusOnSelect: true,
      prevArrow: $('.next-slide-03-2'),
      nextArrow: $('.prev-slide-03-2'),
      asNavFor: '.slider-yacht-nav-2'
    });
    $('.slider-yacht-nav-2').slick({
      slidesToShow: 5,
      slidesToScroll: 1,
      asNavFor: '.slider-yacht-02',
      dots: false,
      focusOnSelect: true
    });
});

Answer 1

[Виталий Першин]

После открытия вкладки необходимо сделать сброс для слайдера. Как-то так:

if (contentBlockYacht) {
    $('.slider-yacht-02, .slider-yacht-nav-2').slick('setPosition');
    contentBlockYacht.classList.add("open-yacht-active");
}