carousel

src/components/core/Carousel.tsx

+import React from "react";
+
+interface DataImage {
+  id: number
+  src: string
+}
+
+interface Props {
+  images: Array<DataImage>
+}
+
+// const Carousel:React.FC<Props> = ({images}) => {
+const Carousel = () => {
+
+
+  const dataImage = [
+    {
+      id: 1,
+      src: "https://placeimg.com/800/200/arch",
+    },
+    {
+      id: 2,
+      src: "https://placeimg.com/800/200/arch",
+    },
+    {
+      id: 3,
+      src: "https://placeimg.com/800/200/arch",
+    },
+    {
+      id: 4,
+      src: "https://placeimg.com/800/200/arch",
+    },
+  ];
+
+  const nbr_image: number = dataImage.length;
+
+  return (
+    <div className="carousel w-full">
+      {
+        dataImage.map((item:any, key:any) => {
+            return (
+                <div id={item.id} className="carousel-item relative w-full" key={key}>
+                    <img src={item.src} className="w-full" />
+                    <div className="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
+                    <a href={(item.id == 1) ? `#${nbr_image}` : `#${item.id - 1}`} className="btn btn-circle">
+                        ❮
+                    </a>
+                    <a href={(item.id == nbr_image) ? `#1` : `#${item.id + 1}`} className="btn btn-circle">
+                        ❯
+                    </a>
+                    </div>
+                </div>
+            )
+        })
+      }
+    </div>
+  );
+};
+
+export default Carousel;