如何设置“滑动"滑块中边缘上的幻灯片的样式 [英] How to style slides on the edges in Swiper slider

问题描述

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

I'm using Swiper slider plugin (https://swiperjs.com). And I need to add opacity 0.5 to slides on the edges of visible viewport. https://i.stack.imgur.com/A6nr5.png

我发现我可以使用此选择器选择合适的幻灯片，并在可见幻灯片数量发生变化时通过媒体查询对其进行更改:

I find out that I can select the right slide with this selector, and change it with media queries when quantity of visible slides change:

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

但是此技巧不适用于左侧的幻灯片.我想不仅有CSS解决方案，还必须使用JS来检测可见的幻灯片?

But this trick will not work for the slide from the left side. I guess there is no only CSS solution and I have to use JS to detect visible slides?

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,

  });

推荐答案

这很容易，swiper会为您完成繁重的工作.只需将其添加到您的滑动设置中即可:

It is pretty easy, swiper does the heavy lifting for you. Just add this in your swiper settings:

watchSlidesVisibility: true

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

Now you can use the class swiper-slide-visible to style your visible slides.

例如:

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

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

Keep in mind, it is easy to change the namespace for each class:

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

---

更新

关于Codepen的示例

在Codepen上的示例(仅1个边)

这篇关于如何设置“滑动"滑块中边缘上的幻灯片的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！