Press ⌘J or click me!
Docs
Carousel
Carousel
Elevate UX with our Animated Carousel. Smooth animations, responsive, touch-friendly. Easily configurable for dynamic content.
Component is already configured in the boilerplate.
Adjusting the Duration of Carousel.
To change the duration of the carousel, please adjust the 10s timer in the tailwind.config.js
1.{2. animation: {3.'slide-to-right': 'slide-right 10s linear infinite',4.},5.}Adjusting the Speed of Carousel.
To change the speed of the carousel, please adjust the
translateX(calc(-250px * 4)) in the tailwind.config.js
translateX(calc(-250px * 4)) in the tailwind.config.js
1.{2. keyframes: {3.'slide-right': {4.'0%': {5.transform: 'translateX(0) translateZ(0px)',6.},7.'100%': {8.transform: 'translateX(calc(-250px * 4)) translateZ(0px)',9.},10.},11.},12.}