How to implement a slider in React Js provided a design file

user_13524850 0
Viewed 71

I want to implement a slider that looks like the design belowdesign file

I tried many libraries like swiper and splide but failed to implement that.

Thank you for your time!

splidejs carousel swiper.js reactjs slider
1 Answers

You can simply add CSS transform and scale to the active slide and the next slide if you are using swiper.

Example using scss

.swiper-slide {
  transition: all 0.3s;
  transform: scale(0.8) translateX(13%) translateY(10%);
  max-width: 50%;

  &.swiper-slide-active {
      transform: scale(1.2) translateX(9%);
  }

  &.swiper-slide-next {
      transform: scale(0.8) translateX(13%) translateY(10%);
  }
}
user_104685160
Related