How to enable auto image slide in carousel ?

[MosaBeryal]

How to enable auto slide functionality in carousel component?

[saadeghi]

You would need to write some JS to do that.
daisyUI's carousel is a simple CSS-only solution. It really can't have as much functionality as a JS carousel can deliver.
I would suggest to use a JS carousel plugin if you need more features. It's perfectly fine to use daisyUI components on some sections and use JS plugins when needed.

[15077693d]

I have created an automatic slide carousel with a feature that prevents scrolling to the specified ID. You can use it as a reference.

import classNames from "classnames";
import { useEffect, useState } from "react";
import { twMerge } from "tailwind-merge";
import type { IPresetIProps, Iimg } from "~/interfaces/common";

type IProps = {
  imgs: Iimg[];
  carouselId: string;
  classNameCarousel?: string;
  classNameForImage?: string;
  isAutoPlay?: boolean;
  autoPlayMilliseconds?: number;
} & IPresetIProps;

const goToOtherImage = (href: string, carouselId: string) => {
  const carousel = document.getElementById(carouselId);
  if (carousel) {
    const target = document.querySelector<HTMLDivElement>(href)!;
    const left = target.offsetLeft;
    carousel.scrollTo({ left: left });
  }
};
export default function DaisyUICarousel({
  imgs,
  carouselId,
  classNameCarousel,
  classNameForImage,
  isAutoPlay = true,
  autoPlayMilliseconds = 5000,
}: IProps) {
  const [activeIndex, setActiveIndex] = useState<number>(0);
  const handleClickBtn = (
    event: React.MouseEvent<HTMLAnchorElement, MouseEvent>,
    i: number
  ) => {
    event.preventDefault();
    const btn = event.currentTarget;
    const href = btn.getAttribute("href")!;
    goToOtherImage(href, carouselId);
    setActiveIndex(i);
  };

  useEffect(() => {
    if (isAutoPlay) {
      const intervalId = setInterval(() => {
        const newActiveIndex =
          activeIndex + 1 === imgs.length ? 0 : activeIndex + 1;
        goToOtherImage(`#DaisyUICarousel_img_${newActiveIndex}`, carouselId);
        setActiveIndex(newActiveIndex);
      }, autoPlayMilliseconds);
      return () => clearInterval(intervalId);
    }
  }, [activeIndex, autoPlayMilliseconds, carouselId, imgs.length, isAutoPlay]);
  return (
    <div className="relative">
      <div
        id={carouselId}
        className={classNames("carousel", classNameCarousel)}
      >
        {imgs.map((img, i) => {
          return (
            <div
              key={`DaisyUICarousel_img_${i}`}
              id={`DaisyUICarousel_img_${i}`}
              className={twMerge(
                "carousel-item w-full bg-center bg-cover bg-no-repeat",
                classNameForImage
              )}
              style={{
                backgroundImage: `url(${img.src})`,
              }}
            ></div>
          );
        })}
      </div>
      <div className="flex justify-center w-full py-2 gap-2  absolute bottom-3">
        {imgs.map((img, i) => {
          return (
            <a
              onClick={(e) => handleClickBtn(e, i)}
              key={`DaisyUICarousel_img_point_${i}`}
              href={`#DaisyUICarousel_img_${i}`}
              className={classNames(
                activeIndex !== i && " opacity-30",
                "btn btn-xs btn-circle"
              )}
            ></a>
          );
        })}
      </div>
    </div>
  );
}

[pietrolubrano]

My solution in next.js

"use client"

import React, { useCallback, useEffect, useRef, useState } from 'react'
import Image from 'next/image'

const imgWidth = 200
const imgHeight = 200

const carouselImgSrc = [
    "https://img.daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.webp",
    "https://img.daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.webp",
    "https://img.daisyui.com/images/stock/photo-1572635148818-ef6fd45eb394.webp",
    "https://img.daisyui.com/images/stock/photo-1494253109108-2e30c049369b.webp",
    "https://img.daisyui.com/images/stock/photo-1550258987-190a2d41a8ba.webp",
    "https://img.daisyui.com/images/stock/photo-1559181567-c3190ca9959b.webp",
    "https://img.daisyui.com/images/stock/photo-1601004890684-d8cbf643f5f2.webp"
]

export default function Carousel() {
    const [carouselActiveItem, setCarouselActiveItem] = useState(0)

    const carouselRef = useRef<HTMLDivElement>(null)

    const scrollItem = () => {
        setCarouselActiveItem(prevState => {
            if(carouselImgSrc.length-1 > prevState){
                return prevState+1
            } else {
                return 0
            }
        })
    }

    const autoplay =useCallback(() => setInterval(scrollItem, 2000),[])

    useEffect(() => {
        const play = autoplay()
        return () => clearInterval(play)
    },[autoplay])

    useEffect(() => {
        carouselRef.current?.scroll({left: imgWidth * carouselActiveItem})
    },[carouselActiveItem])


    return (
        <div ref={carouselRef} className="carousel carousel-center">
            {
                carouselImgSrc.map(imgSrc => 
                    <div key={imgSrc} className="carousel-item">
                        <Image
                        width={imgWidth}
                        height={imgHeight}
                        src={imgSrc}
                        alt={imgSrc} />
                    </div>
                )
            }
        </div>
    )
}

[abhishekpurecode]

To enable automatic image sliding in a carousel, incorporate JavaScript to create a timed interval for transitioning between images. Use the setInterval function to trigger the slide change at regular intervals. Within the function, update the active image index and manage the transition seamlessly. Ensure synchronization with any user-initiated slides to maintain a smooth and cohesive experience. This dynamic approach enhances the carousel's usability, offering both manual control and an automatic slideshow feature. Adjust the interval duration to suit the desired pace of image transitions for an engaging and user-friendly carousel experience.

Check out our blog : Tailwind Carousel: Create Responsive Carousels Easily - Purecode