working carousel

Websites/jefes-nextjs/app/components/MenuBar/MenuBar.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import NavLinks from '@/app/ui/dashboard/nav-links';
 
 const MenuBar = () => {
   return (

Websites/jefes-nextjs/app/components/NavBar/NavBar.tsx

@@ -36,16 +36,16 @@ const NavBar = () => {
           <Image
             src="/img01.webp"
             alt="nav image"
-            layout="fill"
+            fill
-            objectFit="cover"
+            style={{ objectFit: "cover" }}
             quality={100}
             className="brightness-50 hidden md:block"
           />
           <Image
             src="/img01.webp"
             alt="nav image"
-            layout="fill"
+            fill
-            objectFit="cover"
+            style={{ objectFit: "cover" }}
             className="brightness-0 block md:hidden"
           />
         </div>

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

@@ -1,4 +1,11 @@
-.carousel{
+.embla {
+    overflow: hidden;
+  }
+  .embla__container {
+    display: flex;
+  }
+  .embla__slide {
     flex: 0 0 100%;
     min-width: 0;
-}
+  }
+  

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

@@ -1,42 +1,47 @@
+"use client";
 import React from "react";
 import useEmblaCarousel from "embla-carousel-react";
 import Image from "next/image";
-import Autoplay from 'embla-carousel-autoplay';
+import './carousel.css';
 
 export const EmblaCarousel = () => {
   const [emblaRef] = useEmblaCarousel();
 
   return (
-    <div className="overflow-hidden" ref={emblaRef}>
+    <div className="embla" ref={emblaRef}>
-      <div className="flex">
+      <div className="embla__container">
-        <div className="carousel">
+        <div className="embla__slide">
           <Image
-            src="/images/bar01.jpg"
+            src="/img01.webp"
-            alt="bar01"
+            alt="/"
-            fill
+            width={0}
-            style={{ objectFit: "cover" }}
+            height={0}
-            quality={100}
+            sizes="100vw"
+            style={{ width: "100%", height: "auto" }} // optional
           />
         </div>
         <div className="embla__slide">
+          {" "}
           <Image
-            src="/images/food01.jpg"
+            src="/IMG_2431.jpg"
-            alt="food1"
+            alt="/"
-            fill
+            width={0}
-            style={{ objectFit: "cover" }}
+            height={0}
-            quality={100}
+            sizes="100vw"
+            style={{ width: "100%", height: "auto" }} // optional
+          />
+        </div>
+        <div className="embla__slide">
+          {" "}
+          <Image
+            src="/images/bar01.jpg"
+            alt="/"
+            width={0}
+            height={0}
+            sizes="100vw"
+            style={{ width: "100%", height: "auto" }} // optional
           />
         </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

@@ -1,5 +1,3 @@
-"use client";
-
 import React from "react";
 import { useState } from "react";
 import { BsChevronCompactLeft, BsChevronCompactRight } from "react-icons/bs";
@@ -7,40 +5,40 @@ import { RxDotFilled } from "react-icons/rx";
 import { EmblaCarousel } from "./carousel";
 
 const Gallery = () => {
-  const slides = [
+  // const slides = [
-    { url: "/images/1577mobile.webp" },
+  //   { url: "/images/1577mobile.webp" },
-    { url: "/images/bar01.jpg" },
+  //   { url: "/images/bar01.jpg" },
-    { url: "/images/fbimg02.jpg" },
+  //   { url: "/images/fbimg02.jpg" },
-    { url: "/images/food01.jpg" },
+  //   { url: "/images/food01.jpg" },
-    { url: "/images/food02.webp" },
+  //   { url: "/images/food02.webp" },
-    { url: "/images/IMG_2737.webp" },
+  //   { url: "/images/IMG_2737.webp" },
-    { url: "/images/IMG_2749.webp" },
+  //   { url: "/images/IMG_2749.webp" },
-    { url: "/images/IMG_2766.webp" },
+  //   { url: "/images/IMG_2766.webp" },
-    { url: "/images/img01.webp" },
+  //   { url: "/images/img01.webp" },
-    { url: "/images/img05.webp" },
+  //   { url: "/images/img05.webp" },
-  ];
+  // ];
 
-  const [currentIndex, setCurrentIndex] = useState(0);
+  // const [currentIndex, setCurrentIndex] = useState(0);
 
-  const prevSlide = () => {
+  // const prevSlide = () => {
-    const isFirstSlide = currentIndex === 0;
+  //   const isFirstSlide = currentIndex === 0;
-    const newIndex = isFirstSlide ? slides.length - 1 : currentIndex - 1;
+  //   const newIndex = isFirstSlide ? slides.length - 1 : currentIndex - 1;
-    setCurrentIndex(newIndex);
+  //   setCurrentIndex(newIndex);
-  };
+  // };
 
-  const nextSlide = () => {
+  // const nextSlide = () => {
-    const isLastSlide = currentIndex === slides.length - 1;
+  //   const isLastSlide = currentIndex === slides.length - 1;
-    const newIndex = isLastSlide ? 0 : currentIndex + 1;
+  //   const newIndex = isLastSlide ? 0 : currentIndex + 1;
-    setCurrentIndex(newIndex);
+  //   setCurrentIndex(newIndex);
-  };
+  // };
 
-  const goToSlide = (slideIndex) => {
+  // const goToSlide = (slideIndex) => {
-    setCurrentIndex(slideIndex);
+  //   setCurrentIndex(slideIndex);
-  };
+  // };
 
   return (
-    <div className="max-w-[1400px] h-[780px] w-full m-auto py-16 px-4 relative group">
+    <div className="">
-      <EmblaCarousel></EmblaCarousel>
+      <EmblaCarousel />
       {/* <div
         style={{ backgroundImage: `url(${slides[5].url})` }}
         className="w-full h-full rounded-2xl bg-center bg-cover duration-500"

Websites/jefes-nextjs/package.json

@@ -13,6 +13,7 @@
     "classnames": "^2.3.2",
     "clsx": "^2.0.0",
     "easymde": "^2.18.0",
+    "embla-carousel-autoplay": "^8.0.0-rc14",
     "embla-carousel-react": "^8.0.0-rc14",
     "next": "13.5.6",
     "prisma": "^5.4.2",