How to style slides on the edges in Swiper slider

I'm using Swiper slider plugin (). And I need to add opacity 0.5 to slides on the edges of visible viewport.

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

2 Answers

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

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