Gradients on edges of swiper carousel

Question

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

score 4 · Answer 1 · answered Jul 12 '22 at 23:58

4

Look into using gradients on the mask property.

For instance,

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

answered Jul 12 '22 at 23:58

exoRift

531
1
5
13

This one work well, but I needed -webkit-mask-image in MS Edge for example. – Ponzifex Nov 22 '22 at 14:40

score 0 · Answer 2 · edited Jul 13 '22 at 16:49

0

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

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

<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.

edited Jul 13 '22 at 16:49

Cédric

2,239
3
10
28

answered Jul 12 '22 at 20:25

Engraved

5
5

If you tested out the carousel on the web page, you could see that the gradient disappears when you reach the very end of the carousel. By the looks of it, your method would not allow for this behavior. – bravesheeptribe Jul 12 '22 at 21:11
Revised my example to a bit more accurate one. You can test this type out (to see what fits you) on here: https://www.quackit.com/css/functions/css_linear-gradient_function.cfm There are alot of ways to do these. You just need to find out which gets you closest to your goal. I think the 3 color method is pretty close (you could make grey --> white in the actual code. I just made it grey to show the effect it has) – Engraved Jul 12 '22 at 22:06

Gradients on edges of swiper carousel

2 Answers2