Выбрать первый и последний элемент родителя

114

02 июня 2021, 15:00

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

Answer 1

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; } /* тоже третий */

Answer 2

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

$('.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');
});

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Объясните фрагмент кода

Создайте новый класс ExtendedClock, который будет наследоваться от Clock и добавьте параметр precision – количество миллисекунд между «тиками»Установите...

108

javascript

Ферзь на шахматной доске

Есть задача :

javascript

При нажатии на span должны удаляться другие елементы хэдера

Есть логотип и контакты, а также меню-кнопкаПри нажатии на этот menu span должен исчезнуть логотип и контакты

309

javascript

Увеличить время задержки для блока

Как возможно и вообще возможно ли увеличить время hover`a, те