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

Jerky when it carousel resets back with infinite carousel #376

Closed lorenzejay closed 1 year ago

lorenzejay commented 1 year ago

Prerequisite

Before you submit a feature request or report a bug to be fixed, make sure you have stared this repository. A donation is also welcomed

Describe the bug Infinite loop not smooth. Jerks when it resets.

To Reproduce Steps to reproduce the behavior:

const partialVisible = true
const responsive = {
  desktop: {
    breakpoint: { max: 3000, min: 1024 },
    items: 3,
    paritialVisibilityGutter: partialVisible ? 20 : 0,
    slidesToSlide: 2,
  },
  tablet: {
    breakpoint: { max: 1024, min: 464 },
    items: 2,
    paritialVisibilityGutter: partialVisible ? 20 : 0,
    slidesToSlide: 1,
  },
  mobile: {
    breakpoint: { max: 464, min: 0 },
    items: 1,
    paritialVisibilityGutter: partialVisible ? 20 : 0,
    slideToSlide: 1,
  },
}
 <Carousel
          responsive={responsive}
          autoPlay={true}
          swipeable={false}
          draggable={false}
          arrows={false}
          showDots={false}
          infinite={true}
          autoPlaySpeed={2000}
          transitionDuration={500}
          containerClass="carousel-container"
          itemClass="carousel-item"
        >
...
</Carousel>

Expected behavior I am expecting it to smoothly reset or show the index 0 of its children elements. Though, it appears to abruptly snap back

Screenshots carousel-jerky

Additional context

Reproduction n/a

lorenzejay commented 1 year ago

This was my code error. I believe I may my children item styling messed things up. And probably didnt really understand the Carousel props as well. But I simplified to this and it works smoothly:

const responsive = {
  superLargeDesktop: {
    // the naming can be any, depends on you.
    breakpoint: { max: 4000, min: 3000 },
    items: 5,
  },
  desktop: {
    breakpoint: { max: 3000, min: 1024 },
    items: 3,
  },
  tablet: {
    breakpoint: { max: 1024, min: 464 },
    items: 2,
  },
  mobile: {
    breakpoint: { max: 464, min: 0 },
    items: 1,
  },
}

...
<Carouse 
responsive={responsive}
          infinite
          autoPlay
          autoPlaySpeed={3000}>
...