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>
I followed your answers but there is no any change. I upgraded my 'react-multi-carousel' module. If so, It run very well. Thanks.