Пытаюсь найти подходящее решение, использую Slick Slider. Имеется вот такое:
<div class="slick-track">
<div class="slick-slide"></div>
<div class="slick-slide"></div>
<div class="slick-slide"></div>
<div class="slick-slide"></div>
<div class="slick-slide"></div>
<div class="slick-slide"></div>
</div>
Когда меняется страница слайдера, то три элемента получают дополнительные классы, "средний" слайд страницы получает особый класс, например:
<div class="slick-track">
<div class="slick-slide"></div>
<div class="slick-slide slick-active"></div>
<div class="slick-slide slick-active slick-center"></div>
<div class="slick-slide slick-active"></div>
<div class="slick-slide"></div>
<div class="slick-slide"></div>
</div>
<div class="slick-track">
<div class="slick-slide"></div>
<div class="slick-slide"></div>
<div class="slick-slide slick-active"></div>
<div class="slick-slide slick-active slick-center"></div>
<div class="slick-slide slick-active"></div>
<div class="slick-slide"></div>
</div>
Какой селектор CSS или JQuery можно применить чтобы получить первый "slick-active" и третий "slick-active" в этом списке (или первый и последний из трёх "slick-active")? Элементы нужно выбрать по отдельности, то есть отдельно левый от slick-center и правый от slick-center соответственно. nth-child тут не выйдет применить, поскольку слайдер должен скроллиться и соответственно будет меняться порядок активных элементов.
$('.slick-center').prev('.slick-active');
и, следующий$('.slick-center').next('.slick-active');