Can't stop react multi carousel autoplay

3.2k Views Asked by At

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>
3

There are 3 best solutions below

0
On BEST ANSWER

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

0
On

I got same issue, also have set autoPlay={false}.

it's won play at first,but once I click the arrow then it will auto move til the last one.(I didn't set infinite)

I set autoPlaySpeed like ={99999} for now, not a good way, but kind of ok for what I want.

1
On

set shouldResetAutoplay={false}