仅设置最后一个显示光滑滑块幻灯片的样式?

Question

我正在使用仅显示 4 张幻灯片的光滑滑块。它旋转的幻灯片是无限的。

我需要显示的最后一张幻灯片具有不同的样式。我注意到当前 4 张幻灯片的类.slick-active因此我的样式尝试.slide.slick-active:last-of-type{}但是，当滑块设置为无限时，这似乎不起作用。

如何使当前最后一张放映幻灯片具有不同的样式？

Answer 1

如果要使用 JavaScript 完成此操作，可以使用以下命令将新的 CSS 类("突出显示"(添加到最后一张幻灯片：

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

我想你可以用js改变风格 你可以这样做

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

Answer 3

我设法使用以下 CSS 设置了第 4 张幻灯片的样式，即使在旋转后也只设置了第 4 张幻灯片的样式：

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

我只是无法让 JS 检测它是否是第 4 张幻灯片。如果我只想要第二种样式，它将是以下内容：

.slick-active + .slick-active