仅设置最后显示的 Slick Slider 幻灯片的样式？

Question

我使用的是仅显示 4 张幻灯片的 Slick Slider。它旋转的幻灯片是无限的。

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

如何让当前上次放映的幻灯片具有不同的样式？

Answer 1

我猜你可以用js改变风格你可以做到这一点


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

});

Answer 2

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

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

我只是无法让 JS 检测它是否是第 4 号幻灯片。如果我只想要第二个样式，则如下所示：

.slick-active + .slick-active

Answer 3

如果您想使用 JavaScript 完成此操作，您可以使用以下方法将新的 CSS class ('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替换为与您的幻灯片对应的class。

那么你只需要为.highlight添加一个样式：

.highlight {
    border: 2px solid orange;
}

仅设置最后显示的 Slick Slider 幻灯片的样式？

Style only the last showing Slick Slider slide?

javascript

css

jquery

slick.js