Доброго времени суток. Вопрос по slick slider
Необходимо сделать 2 слайдера (первый - это большой на 1н слайд (картинка, текст и тд., второй - это малый с картинкой как на первом. Их необходимо привязать друг к другу и перелистывать с помощью стрелок (это получилось). Но также необходимо сделать, чтоб и при клике на фото маленького слайдера тоже было переключение с большим слайдером.
<div class="slider-big">
<div class="slider-big-item" data-photo="Hasan Ali">
<svg width="44" height="31" viewBox="0 0 44 31" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M9.65845 11.9026C14.9691 11.9026 19.2741 16.1757 19.2741 21.4484C19.2741 26.7195 14.9691 30.993 9.65845 30.993C4.34797 30.993 0.0429109 26.7195 0.0429109 21.4484L0 20.0841C0 9.54111 8.61007 0.993652 19.2312 0.993652V6.44727C15.562 6.44727 12.1124 7.86613 9.51792 10.4424C9.0185 10.9377 8.56269 11.466 8.15163 12.0211C8.64259 11.9451 9.14578 11.9026 9.65845 11.9026ZM34.3844 11.9026C39.6949 11.9026 43.9999 16.1757 43.9999 21.4484C43.9999 26.7195 39.6949 30.993 34.3844 30.993C29.0738 30.993 24.7687 26.7195 24.7687 21.4484L24.7258 20.0841C24.7258 9.54111 33.336 0.993652 43.957 0.993652V6.44727C40.2879 6.44727 36.8383 7.86613 34.2438 10.4424C33.7443 10.9377 33.2886 11.466 32.8774 12.0211C33.3684 11.9451 33.8715 11.9026 34.3844 11.9026Z"
fill="#18CFAB" />
</svg>
<p class="slider-big-text">Integer dignissim, augue tempus ultricies luctus, quam dui laoreet
sem, non
dictum odio nisi quis massa. Morbi pulvinar odio eget aliquam facilisis. Tempus ultricies
luctus, quam dui laoreet sem, non dictum odio nisi quis massa. Morbi pulvinar odio eget
aliquam facilisis.</p>
<p class="slider-big-name">Hasan Ali</p>
<p class="slider-big-position">UX Designer</p>
<img class="what-people-photo" width="171" height="166" src="./img/What People1.png" alt="img">
</div>
<div class="slider-big-item" data-photo="Мила Ку́нис">
<svg width="44" height="31" viewBox="0 0 44 31" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M9.65845 11.9026C14.9691 11.9026 19.2741 16.1757 19.2741 21.4484C19.2741 26.7195 14.9691 30.993 9.65845 30.993C4.34797 30.993 0.0429109 26.7195 0.0429109 21.4484L0 20.0841C0 9.54111 8.61007 0.993652 19.2312 0.993652V6.44727C15.562 6.44727 12.1124 7.86613 9.51792 10.4424C9.0185 10.9377 8.56269 11.466 8.15163 12.0211C8.64259 11.9451 9.14578 11.9026 9.65845 11.9026ZM34.3844 11.9026C39.6949 11.9026 43.9999 16.1757 43.9999 21.4484C43.9999 26.7195 39.6949 30.993 34.3844 30.993C29.0738 30.993 24.7687 26.7195 24.7687 21.4484L24.7258 20.0841C24.7258 9.54111 33.336 0.993652 43.957 0.993652V6.44727C40.2879 6.44727 36.8383 7.86613 34.2438 10.4424C33.7443 10.9377 33.2886 11.466 32.8774 12.0211C33.3684 11.9451 33.8715 11.9026 34.3844 11.9026Z"
fill="#18CFAB" />
</svg>
<p class="slider-big-text">Ми́ла Ку́нис — американская актриса кино и телевидения. Начала
карьеру в 1993 году, снявшись в нескольких рекламных роликах. В следующем году дебютировала
на телевидении в эпизоде мыльной оперы «Дни нашей жизни»,</p>
<p class="slider-big-name">Mila Kunis</p>
<p class="slider-big-position">Actress</p>
<img class="what-people-photo" width="171" height="166" src="./img/What People2.png" alt="img">
</div>
<div class="slider-big-item" data-photo="Майкл Сильве́стр Гарденцио Сталло́не">
<svg width="44" height="31" viewBox="0 0 44 31" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M9.65845 11.9026C14.9691 11.9026 19.2741 16.1757 19.2741 21.4484C19.2741 26.7195 14.9691 30.993 9.65845 30.993C4.34797 30.993 0.0429109 26.7195 0.0429109 21.4484L0 20.0841C0 9.54111 8.61007 0.993652 19.2312 0.993652V6.44727C15.562 6.44727 12.1124 7.86613 9.51792 10.4424C9.0185 10.9377 8.56269 11.466 8.15163 12.0211C8.64259 11.9451 9.14578 11.9026 9.65845 11.9026ZM34.3844 11.9026C39.6949 11.9026 43.9999 16.1757 43.9999 21.4484C43.9999 26.7195 39.6949 30.993 34.3844 30.993C29.0738 30.993 24.7687 26.7195 24.7687 21.4484L24.7258 20.0841C24.7258 9.54111 33.336 0.993652 43.957 0.993652V6.44727C40.2879 6.44727 36.8383 7.86613 34.2438 10.4424C33.7443 10.9377 33.2886 11.466 32.8774 12.0211C33.3684 11.9451 33.8715 11.9026 34.3844 11.9026Z"
fill="#18CFAB" />
</svg>
<p class="slider-big-text">Майкл Сильве́стр Гарденцио Сталло́не — американский актёр,
кинорежиссёр, сценарист и продюсер. За свою актёрскую карьеру снялся более чем в 50
фильмах, в том числе в сериях «Рокки», «Рэмбо», «Неудержимые» и «План побега»</p>
<p class="slider-big-name">Sylvester Stallone</p>
<p class="slider-big-position">Actor</p>
<img class="what-people-photo" width="171" height="166" src="./img/What People3.png" alt="img">
</div>
<div class="slider-big-item" data-photo="Анджели́на Джоли́">
<svg width="44" height="31" viewBox="0 0 44 31" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M9.65845 11.9026C14.9691 11.9026 19.2741 16.1757 19.2741 21.4484C19.2741 26.7195 14.9691 30.993 9.65845 30.993C4.34797 30.993 0.0429109 26.7195 0.0429109 21.4484L0 20.0841C0 9.54111 8.61007 0.993652 19.2312 0.993652V6.44727C15.562 6.44727 12.1124 7.86613 9.51792 10.4424C9.0185 10.9377 8.56269 11.466 8.15163 12.0211C8.64259 11.9451 9.14578 11.9026 9.65845 11.9026ZM34.3844 11.9026C39.6949 11.9026 43.9999 16.1757 43.9999 21.4484C43.9999 26.7195 39.6949 30.993 34.3844 30.993C29.0738 30.993 24.7687 26.7195 24.7687 21.4484L24.7258 20.0841C24.7258 9.54111 33.336 0.993652 43.957 0.993652V6.44727C40.2879 6.44727 36.8383 7.86613 34.2438 10.4424C33.7443 10.9377 33.2886 11.466 32.8774 12.0211C33.3684 11.9451 33.8715 11.9026 34.3844 11.9026Z"
fill="#18CFAB" />
</svg>
<p class="slider-big-text">Анджели́на Джоли́ — американская актриса кино, телевидения и
озвучивания, кинорежиссёр, сценаристка, продюсер, фотомодель, посол доброй воли ООН.
Обладательница премии «Оскар», трёх премий «Золотой глобус» и двух «Премий Гильдии
киноактёров США».</p>
<p class="slider-big-name">Angelina Jolie</p>
<p class="slider-big-position">Actress</p>
<img class="what-people-photo" width="171" height="166" src="./img/What People5.png" alt="img">
</div>
</div>
<div class="slider">
<div class="slider-item" data-photo="Hasan Ali">
<img class="what-people-block-photo" data-photo="Hasan Ali" width="77" height="71"
src="./img/What People1.png" alt="img">
</div>
<div class="slider-item" data-photo="Мила Ку́нис">
<img class="what-people-block-photo" data-photo="Мила Ку́нис" width="77" height="71"
src="./img/What People2.png" alt="img">
</div>
<div class="slider-item" data-photo="Майкл Сильве́стр Гарденцио Сталло́не">
<img class="what-people-block-photo" width="77" height="71" src="./img/What People3.png"
alt="img">
</div>
<div class="slider-item" data-photo="Анджели́на Джоли́">
<img class="what-people-block-photo" width="77" height="71" src="./img/What People5.png"
alt="img">
</div>
$(document).ready(function () {
$('.slider').slick({
slidesToShow: 3,
variableWidth: true,
asNavFor: '.slider-big',
});
$('.slider-big').slick({
slidesToShow: 1,
arrows: false,
asNavFor: '.slider'
});
});