image-carousel-basic-ex-04

1"use client";
2 
3import { useState } from "react";
4import ImageCarouselBasic, {
5  CarouselImages,
6} from "@/components/commerce-ui/image-carousel-basic";
7 
8const images: CarouselImages = [
9  {
10    title: "Speaker 1",
11    url: "https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/speaker-02.jpg",
12  },
13  {
14    title: "Speaker 2",
15    url: "https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/speaker-03.jpg",
16  },
17  {
18    title: "Speaker 3",
19    url: "https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/speaker-04.jpg",
20  },
21];
22 
23export default function ImageCarousel_Basic_Ex_04() {
24  const [selectedIndex, setSelectedIndex] = useState(0);
25 
26  return (
27    <div className="space-y-8">
28      <div>
29        <div className="mb-4 flex w-full flex-wrap items-center justify-between gap-2">
30          <button
31            className="cursor-pointer rounded border px-3 py-1"
32            onClick={() => setSelectedIndex(Math.max(0, selectedIndex - 1))}
33          >
34            Previous
35          </button>
36          <span className="font-mono">Current Slide: {selectedIndex + 1}</span>
37          <button
38            className="cursor-pointer rounded border px-3 py-1"
39            onClick={() =>
40              setSelectedIndex(Math.min(images.length - 1, selectedIndex + 1))
41            }
42          >
43            Next
44          </button>
45        </div>
46        <ImageCarouselBasic
47          images={images}
48          imageFit="contain"
49          selectedIndex={selectedIndex}
50          onSlideChange={setSelectedIndex}
51        />
52      </div>
53    </div>
54  );
55}