npm install react-glide-carousel

1import { Carousel, ImageSlider, Progress } from "react-glide-carousel";
2import { NextIcon, PrevIcon } from "react-glide-carousel";
3import { images } from "./data";
4
5export default function App() {
6  return (
7    <div className="w-[600px] h-[400px]">
8      <Carousel
9        defaultSlider={false}
10        items={images.map((item) => item.image)}
11        autoPlay
12        interval={5000}
13        className="w-full h-full"
14      >
15        <ImageSlider 
16          className="w-full h-[calc(100%-45px)] border border-gray-600" 
17        />
18        <div 
19          className="flex flex-row justify-center items-center 
20          w-full pt-5 gap-5"
21        >
22          <PrevIcon className="w-6 h-6 p-1" />
23          <div className="bg-zinc-800 rounded-full px-3 p-2 w-1/3">
24            <Progress className="w-full" />
25          </div>
26          <NextIcon className="w-6 h-6 p-1" />
27        </div>
28      </Carousel>
29    </div>
30  );
31}

1import { Carousel } from "react-glide-carousel";
2import { images } from "./data";
3
4export default function App() {
5  return (
6    <div className="w-[600px] h-[350px]">
7      <Carousel
8        items={images.map((item) => item.image)}
9        autoPlay
10        interval={5000}
11        className="w-full h-full"
12      />
13    </div>
14  );
15}

1import { Carousel, Progress } from "react-glide-carousel";
2import { NextIcon, PrevIcon } from "react-glide-carousel";
3import { images } from "./data";
4
5export default function App() {
6  return (
7    <div className="w-[600px] h-[350px]">
8      <Carousel
9        items={images.map((item) => item.image)}
10        autoPlay
11        interval={5000}
12        className="w-full h-full"
13      >
14        <PrevIcon 
15          className="w-8 h-8 p-1.5 absolute left-5 top-1/2 
16          -translate-y-1/2 bg-white/30 rounded-full" 
17        />
18        <NextIcon className="w-8 h-8 p-1.5 absolute right-5 top-1/2 
19          -translate-y-1/2 bg-white/30 rounded-full" />
20        <div 
21          className="absolute flex items-center justify-center 
22          bottom-8 w-full"
23        >
24          <Progress className="w-1/3 " />
25        </div>
26      </Carousel>
27    </div>
28  );
29}