Slick слайдер в слайдере — возможно?

Question

[bluecuracao]

Есть слайдер, где одномоментно показывается один слайд, всего таких слайдов будет 10. В каждом есть блок с картинкой и превьюшками.
Сделала с помощью слика - по отдельности всё работает. Соединила вместе, и теперь основной слайдер перелистывается при нажатии на превьюшку. Подскажите, как изменить?

<div class="slider__wrapper" >
                       <!-- slide #1 ---> 
 <div class="slider__item">
    <div class="slider__left-side">
       <div class="slider__photos"> <!-- большие фото-->
          <img class="" src="img/surf5-1.png" width="330" height="450">
            <img class="" src="img/surf5-2.png" width="330" height="450">
            <img class="" src="img/surf5-3.png" width="330" height="450">
             <img class="" src="img/surf5-4.png" width="330" height="450">
          </div>
          <div class="slider__thumbs"> <!-- превью --->
              <img class="slider__preview" src="img/surf5-1.png" width="70" height="70">
              <img class="slider__preview" src="img/surf5-2.png" width="70" height="70">
              <img class="slider__preview" src="img/surf5-3.png" width="70" height="70">
              <img class="slider__preview" src="img/surf5-4.png" width="70" height="70">
          </div>
       </div>
    </div>
   </div>
                                <!--slide #2-->
   <div class="slider__item">
    <div class="slider__left-side">
       <div class="slider__photos"> <!-- большие фото-->
          <img class="" src="img/surf7-1.png" width="330" height="450">
            <img class="" src="img/surf7-2.png" width="330" height="450">
            <img class="" src="img/surf7-3.png" width="330" height="450">
             <img class="" src="img/surf7-4.png" width="330" height="450">
          </div>
          <div class="slider__thumbs"> <!-- превью --->
              <img class="slider__preview" src="img/surf7-1.png" width="70" height="70">
              <img class="slider__preview" src="img/surf7-2.png" width="70" height="70">
              <img class="slider__preview" src="img/surf7-3.png" width="70" height="70">
              <img class="slider__preview" src="img/surf7-4.png" width="70" height="70">
          </div>
       </div>
    </div>
  </div>
</div>

$(function(){
      $('.slider__photos').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: false,
        asNavFor: '.slider__thumbs'
      });

      $('.slider__thumbs').slick({
        slidesToShow: 4,
        slidesToScroll: 1,
        asNavFor: '.slick-slider',
        focusOnSelect: true,
        centerMode: true,
        vertical: true
      });
     
      $('.slider__wrapper').slick({
        swipe: false,
        prevArrow: '<div class="block__arrow--left"><</div>',
        nextArrow: '<div class="block__arrow--right">></div>'
      });
  });

Answer 1

[Егор Живагин]

Вам нужно циклом проходить по всем контейнерам slider__item и внутри каждого отдельно инициализировать слайдеры. Если я правильно понял проблему.

Можете в песочницу codepen/jsfiddle выложить пример? И нагляднее будет, и помочь с кодом можно