'How to style slides on the edges in Swiper slider

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;
}

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,

  });
javascriptcssswiper


Solution 1:[1]

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


// Deprecated
// watchSlidesVisibility: true

// 7.0.0 +
watchSlidesProgress: true

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

For example:

.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'

Update

Example on Codepen

Update 2

Example (only 1 edge) on Codepen

Solution 2:[2]

Here is a solution that I find out:

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');
    }

  }

And styles:

.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);
    }

  }
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Oleg Burakov

Related Questions