如何在 Swiper 滑块中设置边缘幻灯片的样式

Question

我正在使用 Swiper 滑块插件（https://swiperjs.com）。我需要为可见视口边缘的幻灯片添加不透明度 0.5。https://i.stack.imgur.com/A6nr5.png

我发现我可以使用此选择器选择正确的幻灯片，并在可见幻灯片数量发生变化时使用媒体查询进行更改：

.swiper-slide-active + * + * + * {
      opacity: 0.5;
}

但这个技巧对于从左侧滑动则不起作用。我想没有唯一的 CSS 解决方案，我必须使用 JS 来检测可见的幻灯片？

const specialSlider = new Swiper('.special-slider', {
    loop: true,
    speed: 1000,
    slidesPerView: 'auto',
    spaceBetween: 30,
    centeredSlides: true,

    navigation: {
      nextEl: '.special-slider__next',
      prevEl: '.special-slider__prev',
    },
    watchOverflow: true,
    grabCursor: true,

  });

Answer 1

这非常简单，swiper 会为您完成繁重的工作。只需将其添加到您的滑动器设置中即可：

// Deprecated
// watchSlidesVisibility: true

// 7.0.0 +
watchSlidesProgress: true

现在您可以使用该类swiper-slide-visible来设置可见幻灯片的样式。

例如：

.swiper-slide {
  opacity: .25;
}
.swiper-slide-visible {
  opacity: 1;
}

请记住，更改每个类的名称空间很容易：

slideClass: 'myslider__slide',
slideVisibleClass: 'myslider__slide--visible'

更新

Codepen 上的示例

更新2

Codepen 上的示例（仅 1 条边）