I want behavior like the one on this airbnb web page. Specifically, the one in the below image. As you can see, at the edges of the carousel, it has a fading effect only on slide that are cut off.

This is what I have so far: https://jsfiddle.net/gpu5cafz/.

HTML (make sure to install Swiper if you aren't using the 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,
});