javascript - 如何在 Swiper slider 的边缘设置幻灯片样式

Question

我正在使用 Swiper slider 插件 ( https://swiperjs.com )。我需要将不透明度 0.5 添加到可见视口(viewport)边缘的幻灯片。 /image/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'

---

更新

Example on Codepen

更新2

Example (only 1 edge) on Codepen