Swiper and a CSS Mask

swipercss

Can I has Hamburgers?

Yes you can :has hamburgers!

Anyway, sometimes when using swiper you might want to have this mask effect on last part of your swiper container or even the last slide.

In this example I take the container example:

// Re-usable swiper mask; Should be page wide not on the .swiper-wrapper.
.swiper-mask {
  transition: mask-image 0.3s ease, -webkit-mask-image 0.3s ease;

  &:not(:has(.swiper-slide:last-child.swiper-slide-visible)) {
    mask-image: linear-gradient(90deg, black 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, black 90%, transparent 100%);
  }
}

The swiper does need the following props to make sure the .swiper-slide-visible is being used;