carousel is breaking . I dont know the actual reason

[iamsirjan]

https://www.awesomescreenshot.com/video/8383181?key=60fa04a3619e5e629c7f175f50661415 check this

const responsive = {
        desktop: {
          breakpoint: { max: 3000, min: 1024 },
          items: 4,
          slidesToSlide: 4, // optional, default to 1.

        },
        tablet: {
          breakpoint: { max: 1024, min: 464 },
          items: 4,
          slidesToSlide: 2 // optional, default to 1.
        },
        mobile: {
          breakpoint: { max: 464, min: 0 },
          items: 1,
          slidesToSlide: 1 // optional, default to 1.
        }
      };

<Carousel

 swipeable={false}
 draggable={false}

 responsive={responsive}
 ssr={true} // means to render carousel on server-side.
 infinite={true}
//  autoPlay={this.props.deviceType !== "mobile" ? true : false}
 autoPlaySpeed={1000}
 keyBoardControl={true}
 customTransition="all .5"
 transitionDuration={500}
 containerClass="carousel-container"
 removeArrowOnDeviceType={["tablet", "mobile"]}
//  deviceType={this.props.deviceType}
 dotListClass="custom-dot-list-style"
 itemClass="carousel-item-padding-40-px"
>

[ankit10594]

I am also getting the same issue any luck? anyone?

[pratikdevdas]

I know it's very late but this issue occurs when you don't set a fix width to the parent element of the carousel. The Carousel takes the whole viewport if overflow-x is not hidden. Wrap your carousel inside of div and add a width property. @iamsirjan @ankit10594