仅样式化最后显示的 Slick Slider 幻灯片？答案

【问题标题】：Style only the last showing Slick Slider slide?仅样式化最后显示的 Slick Slider 幻灯片？
【发布时间】：2020-01-23 09:05:00
【问题描述】：

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

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

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

【问题讨论】：

这可能会帮助您获得最后一项stackoverflow.com/questions/30828831/…

标签： javascript jquery css slick.js

【解决方案1】：

如果您想使用 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;
}

【讨论】：

这对你有用还是你有问题？

【解决方案2】：

我猜你可以用 js 改变样式你可以这样做


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

});

【讨论】：

这取决于幻灯片的移动方向。如果您在幻灯片中向后移动（通过使用“上一个”箭头或滑动），您将突出显示第二张幻灯片。

【解决方案3】：

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

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

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

.slick-active + .slick-active

【讨论】：