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

【问题标题】：How to style slides on the edges in Swiper slider如何在 Swiper 滑块的边缘设置幻灯片样式
【发布时间】：2020-03-03 22:44:04
【问题描述】：

我正在使用 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,

  });

【问题讨论】：

你可以考虑在屏幕的最左端和最右端覆盖一个半透明的白色 div，等于那里显示的部分幻灯片的宽度。您也许可以在滑块本身上使用 :before 和 :after 伪元素来完成此操作。

标签： javascript css swiper

【解决方案1】：

这很容易，swiper 为您完成繁重的工作。只需将其添加到您的 swiper 设置中即可：

watchSlidesVisibility: 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

【讨论】：

唯一的事情是我希望边缘的幻灯片不透明度为 0.25，但它们也有.swiper-slide-visible class。 i.imgur.com/42hAgzm.png codepen.io/olegburakov/pen/OJVBdxg
只需编辑 swiper 默认 css。我在答案中添加了一个示例。
嘿@Bitpunk 如果它应该只是最后一个（右侧）怎么办？我尝试使用您的代码，到目前为止工作正常，但我坚持使用它，因为我只想改变右边缘的不透明度。提前谢谢
您可以使用+ 选择器来解决这个问题。这不是最好的解决方案 - 但它可能足以满足您的需求。我在答案中添加了一个新示例。

【解决方案2】：

这是我找到的解决方案：

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

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

    on: {

      init: makeSlidesTransparent,
      slideChangeTransitionStart: makeSlidesTransparent,
    }

  });

  function makeSlidesTransparent() {

    //Hide old slides
    const oldSlides = d.getAll('.special-slider__item.js-visible');
    for (let i = 0; i < oldSlides.length; i++) {
      oldSlides[i].classList.remove('js-visible')
    }

    const width = window.innerWidth;

    if (width >= 0 && width < 960) {
      //Make visible new slides
      const activeSlide = d.get('.special-slider__item.swiper-slide-active');
      activeSlide.classList.add('js-visible');
    }

    if (width >= 960 && width < 1700) {
      //Make visible new slides
      const activeSlide = d.get('.special-slider__item.swiper-slide-active');
      const prev1 = activeSlide.previousElementSibling;
      const next1 = activeSlide.nextElementSibling;

      prev1.classList.add('js-visible');
      activeSlide.classList.add('js-visible');
      next1.classList.add('js-visible');
    }

    if (width >= 1700) {
      //Make visible new slides
      const activeSlide = d.get('.special-slider__item.swiper-slide-active');
      const prev1 = activeSlide.previousElementSibling;
      const prev2 = prev1.previousElementSibling;
      const next1 = activeSlide.nextElementSibling;
      const next2 = next1.nextElementSibling;

      prev1.classList.add('js-visible');
      prev2.classList.add('js-visible');
      activeSlide.classList.add('js-visible');
      next1.classList.add('js-visible');
      next2.classList.add('js-visible');
    }

  }

和样式：

.special-slider {

  &__item {
    padding-left: 15px;
    padding-right: 15px;
    width: 330px;
    box-sizing: border-box;
    height: auto;
    opacity: 0.5;
    transition: all $transition-style-slow;

    &.js-visible{
      opacity: 1;
    }

    .product-item {
      background-color: rgba(218, 215, 205, 0.2);
    }

  }
}

【讨论】：