title: How to style slides on the edges in Swiper slider
body: <p>I'm using Swiper slider plugin (<a href="https://swiperjs.com" rel="nofollow noreferrer">https://swiperjs.com</a>). And I need to add opacity 0.5 to slides on the edges of visible viewport. <a href="https://i.stack.imgur.com/A6nr5.png" rel="nofollow noreferrer">https://i.stack.imgur.com/A6nr5.png</a></p>
  
  <p>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:</p>
  
  <pre><code>.swiper-slide-active + * + * + * {
        opacity: 0.5;
  }
  </code></pre>
  
  <p>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?</p>
  
  <pre><code>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,
  
    });
  </code></pre>