Quiero un comportamiento como el de esta página web de airbnb. Concretamente, el de la siguiente imagen. Como puede ver, en los bordes del carrusel, tiene un efecto de desvanecimiento solo en las diapositivas que están cortadas.

Esto es lo que tengo hasta ahora: https://jsfiddle.net/gpu5cafz/ .

HTML (asegúrese de instalar Swiper si no está usando jsfiddle):

 <div class="container"> <div class="swiper"> <!-- Additional required wrapper --> <div class="swiper-wrapper"> <!-- Slides --> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> <div class="swiper-slide">Slide 4</div> <div class="swiper-slide">Slide 5</div> </div> </div> </div>

CSS:

 .swiper-slide { width: 300px !important; height: 200px !important; text-decoration: none; background-color: gray; border-radius: 10px; color: white; background: rgb(203, 203, 203); } .container { padding: 60px 120px 60px 120px; }

JS:

 const swiper = new Swiper('.swiper', { slidesPerView: 'auto', spaceBetween: 30, freeMode: true, freeModeSticky: false, watchSlidesProgress: true, watchSlidesVisibility: true, });