0

Пытаюсь найти подходящее решение, использую 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 тут не выйдет применить, поскольку слайдер должен скроллиться и соответственно будет меняться порядок активных элементов.

3
  • Что значит получить? Не совсем ясно.
    – Kirill
    15 авг 2019 в 12:34
  • 1
    предыдущий $('.slick-center').prev('.slick-active'); и, следующий $('.slick-center').next('.slick-active');
    – InDevX
    15 авг 2019 в 12:37
  • @KirillKorushkin в смысле правильный селектор чтобы можно было взаимодействовать с элементом. Написать нечто вроде: $('.slick-track .slick-active:last-item-of-list').css('background-color','black'); и добавить последнему элементу чёрный фон. На вопрос хоть и ответили, но уточнить стоит. 15 авг 2019 в 12:40

2 ответа 2

3
var active = $('.slick-active');

var first = active.eq(0);
var last = active.eq( active.length - 1 );

или...

var first = $('.slick-center').prev();
var last = $('.slick-center').next();

К слову, если это дело нужно только для добавления стилей, можно на CSS)

.slick-active { background-color: red; }
              /* Все активные, но в итоге применится только к первому: 
               * Следующие селекторы перебьют этот */

.slick-active.slick-center { background-color: blue; } /* центральный */

.slick-center + .slick-active { background-color: orange; } /* третий */

.slick-center ~ .slick-active { background-color: orange; } /* тоже третий */
0

При каждой смене слайда нужно заново ловить классы.
Вот доработанный пример:

$('.your-slider').on('init', function(slick){
var active = $('.your-slider .slick-active');
var first = active.eq(0);
var last = active.eq( active.length - 1 );
first.addClass('test');
last.addClass('test');
});

$('.your-slider').on('afterChange', function(event, slick, currentSlide, nextSlide){
var active = $('.your-slider .slick-active');
var first = active.eq(0);
var last = active.eq( active.length - 1 );
active.removeClass('test')
first.addClass('test');
last.addClass('test');
});

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.