courosel start with embla

Websites/jefes-nextjs/app/gallery/carousel.css

@@ -0,0 +1,4 @@
+.carousel{
+    flex: 0 0 100%;
+    min-width: 0;
+}

Websites/jefes-nextjs/app/gallery/carousel.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import useEmblaCarousel from "embla-carousel-react";
+import Image from "next/image";
+import Autoplay from 'embla-carousel-autoplay';
+
+export const EmblaCarousel = () => {
+  const [emblaRef] = useEmblaCarousel();
+
+  return (
+    <div className="overflow-hidden" ref={emblaRef}>
+      <div className="flex">
+        <div className="carousel">
+          <Image
+            src="/images/bar01.jpg"
+            alt="bar01"
+            fill
+            style={{ objectFit: "cover" }}
+            quality={100}
+          />
+        </div>
+        <div className="embla__slide">
+          <Image
+            src="/images/food01.jpg"
+            alt="food1"
+            fill
+            style={{ objectFit: "cover" }}
+            quality={100}
+          />
+        </div>
+      </div>
+      <div className="embla__slide">
+        {" "}
+        <Image
+          src="/images/food02.webp"
+          alt="food2"
+          fill
+          style={{ objectFit: "cover" }}
+          quality={100}
+        />
+      </div>
+    </div>
+  );
+};

Websites/jefes-nextjs/app/gallery/page.tsx

@@ -4,6 +4,7 @@ import React from "react";
 import { useState } from "react";
 import { BsChevronCompactLeft, BsChevronCompactRight } from "react-icons/bs";
 import { RxDotFilled } from "react-icons/rx";
+import { EmblaCarousel } from "./carousel";
 
 const Gallery = () => {
   const slides = [
@@ -39,7 +40,8 @@ const Gallery = () => {
 
   return (
     <div className="max-w-[1400px] h-[780px] w-full m-auto py-16 px-4 relative group">
-      <div
+      <EmblaCarousel></EmblaCarousel>
+      {/* <div
         style={{ backgroundImage: `url(${slides[5].url})` }}
         className="w-full h-full rounded-2xl bg-center bg-cover duration-500"
       ></div>
@@ -59,7 +61,7 @@ const Gallery = () => {
             <RxDotFilled />
           </div>
         ))}
-      </div>
+      </div> */}
     </div>
   );
 };