Search code examples
autoplayreact-multi-carousel

Can't stop react multi carousel autoplay


I am using the 'react-multi-carousel' module to show multiple items. All is going well, but it runs automatically. I don't want it to autoplay.

I have set props "autoPlay" to "false" as follows. But the carousel focus goes from the first slide to the last slide. What is important is that this problem is happening when I click the arrow (next) button first.

My code:


    <Carousel
      additionalTransfrom={0}
      arrows
      autoPlay={false}
      autoPlaySpeed={3000}
      centerMode={false}
      className=""
      containerClass="container-with-dots"
      dotListClass=""
      draggable
      focusOnSelect={false}
      infinite
      itemClass=""
      keyBoardControl
      minimumTouchDrag={80}
      renderButtonGroupOutside={false}
      renderDotsOutside={false}
      responsive={{
        desktop: {
          breakpoint: {
            max: 3000,
            min: 1024
          },
          items: 3,
          partialVisibilityGutter: 40
        },
        mobile: {
          breakpoint: {
            max: 464,
            min: 0
          },
          items: 1,
          partialVisibilityGutter: 30
        },
        tablet: {
          breakpoint: {
            max: 1024,
            min: 464
          },
          items: 2,
          partialVisibilityGutter: 30
        }
      }}
      showDots={false}
      sliderClass=""
      slidesToSlide={1}
      swipeable
    >
                <div className='carousel-item-padding-40-px' style={{backgroundColor: 'blue', padding: '30px'}}>Item 1</div>
                <div className='carousel-item-padding-40-px' style={{backgroundColor: 'blue', padding: '30px'}}>Item 2</div>
                <div className='carousel-item-padding-40-px' style={{backgroundColor: 'blue', padding: '30px'}}>Item 3</div>
                <div className='carousel-item-padding-40-px' style={{backgroundColor: 'blue', padding: '30px'}}>Item 4</div>
              </Carousel>

Solution

  • I followed your answers but there is no any change. I upgraded my 'react-multi-carousel' module. If so, It run very well. Thanks.