Стиль только последний показ слайдов Slick Slider?

Question

Я использую скользящий слайдер, который показывает только 4 слайда. Слайды, через которые он вращается, бесконечны.

Мне нужно, чтобы последний показ слайдов имел другой стиль. Я заметил, что 4 текущих слайда имеют класс .slick-active, поэтому с моим стилем .slide.slick-active:last-of-type{}, однако, это не работает, когда ползунок установлен на бесконечность.

Как я могу получить текущий последний показ слайдов, чтобы иметь другой стиль?

Answer 1

Если вы хотите выполнить sh, используя JavaScript, вы можете добавить новый класс CSS ('highlight') к последнему слайду, используя следующее:

document.querySelector('.your-slick-slideshow').on('init'){
    // Get all of the slide elements
    const slides = document.querySelectorAll('.your-slick-slideshow .slick-slide');

    // If we have some slides
    if (slides.length) {
        // Add the 'highlight' class to the last slide in the list
        slides[slides.length - 1].classList.add('highlight');
    }
});

Конечно вам нужно заменить .your-slick-slideshow на класс, соответствующий вашему слайд-шоу.

Тогда вам просто нужно добавить стиль для .highlight:

.highlight {
    border: 2px solid orange;
}

Answer 2

Мне удалось стилизовать 4-й слайд, и только 4-й, даже после поворота, используя следующее CSS:

.slick-active + .slick-active + .slick-active + .slick-active

Я просто не смог заставить JS определить, было ли это Слайд № 4. Если бы я хотел только второй стиль, это было бы следующим:

.slick-active + .slick-active

Answer 3

вы можете изменить стиль с помощью js Я думаю, вы можете сделать это

$('.slides').on('beforeChange', function(event, slick, currentSlide, nextSlide){
  console.log(nextSlide);
  if (nextSlide == 0) {
    // change style
  }

});