Gradients on edges of swiper carousel-CodePudding

I want behavior like the one on 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 >
  <div >
    <!-- Additional required wrapper -->
    <div >
      <!-- Slides -->
      <div >Slide 1</div>
      <div >Slide 2</div>
      <div >Slide 3</div>
      <div >Slide 4</div>
      <div >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,
});

CodePudding user response：

You are correct it was not the exact thing your looking for. Your looking for this type of soluton:

<title>My Example</title>

<style>
  div {
    background: linear-gradient(to right, white 20%, grey, white 80%);
    color: white;
    padding: 30px;
    height: 160px;
    font-family: sans-serif;
    font-size: 1.5em;
  }
</style>

<div>
  Three color stops.
</div>```

I think in the end your gonna end up in this ballpark. I am not 100% sure how to get your exact endresult (they seem to use some kind of animation feature too). But maybe someone else can supplement. This example I am giving you here is based on what I built for a customer once where they had an image in the middle and they wanted to have a background color left/right and then have it fade out as it got closer to the middle of the screen.

CodePudding user response：

Look into using gradients on the mask property.

For instance,

.container {
  mask-image: linear-gradient(to right, transparent 0%, black 20% 80%, transparent 100%);
}