YIZHUANG / react-multi-carousel

A lightweight production-ready Carousel that rocks supports multiple items and server-side rendering with no dependency. Bundle size 2kb.
MIT License
1.25k stars 286 forks source link

How to make carousel items move continuously like an animation? #366

Open ibrahimrehman1 opened 1 year ago

ibrahimrehman1 commented 1 year ago

I am using react-multi-carousel in my application to display multiple logos at the same time. As of now, the carousel is working but the problem is that when the carousel moves, it immediately displays the other logos. what I want to have is that there should be a continuous animation among the carousel items.

Is there any way to achieve this?

This is the current configuration:

const responsive = { desktop: { breakpoint: { max: 3000, min: 1024 }, items: 7, // No of carousel items visible in desktop slidesToSlide: 3, }, tablet: { breakpoint: { max: 1024, min: 464 }, items: 5, // No of carousel items visible in tablet slidesToSlide: 2, }, mobile: { breakpoint: { max: 464, min: 0 }, items: 2, // No of carousel items visible in mobile slidesToSlide: 1, }, };

`<Carousel swipeable={false} draggable={false} showDots={false} responsive={responsive} ssr={true} infinite={true} autoPlay={true} autoPlaySpeed={3000} keyBoardControl={true} customTransition="all 2" transitionDuration={500} containerClass="carousel-container" removeArrowOnDeviceType={["tablet", "mobile", "desktop"]} dotListClass="custom-dot-list-style" itemClass="carousel-item-padding-40-px"

... `

YIZHUANG commented 1 year ago

It's coming soon. I got it almost working here: https://www.junia.ai/art

Rica02 commented 2 weeks ago

Hi, any update on this? Has it been implemented?