YIZHUANG/react-multi-carousel

How to make carousel items move continuously like an animation?

ibrahimrehman1 opened this issue · 2 comments

ibrahimrehman1 commented

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" > ... </Carousel>

YIZHUANG commented

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

  • 👍2