rc-infinite-carousel/dist/index.css

A lightweight and customizable infinite carousel component for React. Perfect for displaying images, logos, testimonials, or any other content with smooth transitions and flexible configuration options.

.carousel{height:calc(var(--slide-height) + 1rem);overflow:hidden;padding-block:.5rem;position:relative;width:100%}.carousel.with-mask{-webkit-mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent);mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent)}.carousel .slide{animation:move var(--animation-duration) linear infinite;animation-delay:calc((var(--animation-duration)/var(--slide-items))*(var(--slide-index)*-1));height:var(--slide-height);position:absolute;transition:filter .5s;width:var(--slide-width)}.no-scroll{animation:move var(--animation-duration) linear}@keyframes move{0%{left:100%}to{left:calc(var(--slide-width)*-1*(var(--slide-items) - var(--visible-slides)))}}.carousel[data-reverse=true] .slide{animation:reverseMove var(--animation-duration) linear infinite;animation-delay:calc((var(--animation-duration)/var(--slide-items))*(var(--slide-index)*-1))}@keyframes reverseMove{0%{left:calc(var(--slide-width)*-1*(var(--slide-items) - var(--visible-slides)))}to{left:100%}}