Carousel - autoplay shows inconsistent behavior with API docs

[AlessandroGenerale17]

I am using the NEXT JS framework. When using the example of the basic carousel, it has the attribute data-te-carousel-slide which, according to the docs, autoplays the carousel after the user manually cycles the first item. If "carousel", autoplays the carousel on load. On the example website, the carousel autoplays even though "carousel" is not set.

When copy pasting the code on my end, the carousel works as described in the docs. It only autoplays once I cycle the first item. When then setting the data-te-carousel-slide={'carousel'}, as mentioned in the docs, the slide animation stops working, and it does not autoplay. On top of this, the first item in the pagination results unselected.

CODE

<div
			id='carouselExampleCaptions'
			className='relative'
			data-te-carousel-init
			data-te-carousel-slide={'carousel'}
			data-te-interval='2000'
		>
			<div
				className='absolute right-0 bottom-0 left-0 z-[2] mx-[15%] mb-4 flex list-none justify-center p-0'
				data-te-carousel-indicators
			>
				<button
					type='button'
					data-te-carousel-active
					data-te-target='#carouselExampleCaptions'
					data-te-slide-to='0'
					className='mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none'
				></button>
				<button
					type='button'
					data-te-target='#carouselExampleCaptions'
					data-te-slide-to='1'
					className='mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none'
				></button>
				<button
					type='button'
					data-te-target='#carouselExampleCaptions'
					data-te-slide-to='2'
					className='mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none'
				></button>
			</div>
			<div className="relative w-full overflow-hidden after:clear-both after:block after:content-[''] rounded-lg">
				<div
					className='relative float-left -mr-[100%] w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none'
					data-te-carousel-active
					data-te-carousel-item
				>
					<img
						src='https://proadvisors.it/wp-content/uploads/2022/01/home2.jpg'
						className='block w-full'
						alt='...'
					/>
					<div className='absolute top-[40%] left-[15%] py-5 text-center text-white'>
						<h5 className='text-xl lg:text-5xl  max-w-[70%] text-left'>
							Il miglior investimento del tuo domani
						</h5>
					</div>
				</div>
				<div
					className='relative float-left -mr-[100%] hidden w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none'
					data-te-carousel-item
				>
					<img
						src='https://proadvisors.it/wp-content/uploads/2022/01/home3.jpg'
						className='block w-full'
						alt='slide-2'
					/>
					<div className='absolute top-[40%] left-[15%] py-5 text-center text-white'>
						<h5 className='text-xl lg:text-5xl  max-w-[70%] text-left'>
							Il progetto del tuo futuro inizia oggi
						</h5>
					</div>
				</div>
				<div
					className='relative float-left -mr-[100%] hidden w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none'
					data-te-carousel-item
				>
					<img
						src='https://proadvisors.it/wp-content/uploads/2022/01/home1-1.jpg'
						className='block w-full'
						alt='slide-3'
					/>
					<div className='absolute top-[40%] left-[15%] py-5 text-center text-white'>
						<h5 className='text-xl lg:text-5xl  max-w-[70%] text-left'>
							Sicuri e protetti sempre e ovunque
						</h5>
					</div>
				</div>
			</div>
			<button
				className='absolute top-0 bottom-0 left-0 z-[1] flex w-[15%] items-center justify-center border-0 bg-none p-0 text-center text-white opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:text-white hover:no-underline hover:opacity-90 hover:outline-none focus:text-white focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none'
				type='button'
				data-te-target='#carouselExampleCaptions'
				data-te-slide='prev'
			>
				<BsChevronLeft size={24} />
			</button>
			<button
				className='absolute top-0 bottom-0 right-0 z-[1] flex w-[15%] items-center justify-center border-0 bg-none p-0 text-center text-white opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:text-white hover:no-underline hover:opacity-90 hover:outline-none focus:text-white focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none'
				type='button'
				data-te-target='#carouselExampleCaptions'
				data-te-slide='next'
			>
				<BsChevronRight size={24} />
			</button>
		</div>

[Trochonovitz]

Let me clarify things: you want to achieve that Carousel will be autoplay on load?

[AlessandroGenerale17]

Let me clarify things: you want to achieve that Carousel will be autoplay on load?

Yes, that is what I expected following the API