products and product/slug page done

components/pages/products/slug/slider.tsx

@@ -0,0 +1,59 @@
+import { Swiper, SwiperSlide } from "swiper/react";
+import { Navigation } from "swiper/modules";
+import "swiper/css";
+import "swiper/css/navigation";
+import { DATA } from "@/lib/demoData";
+
+// The custom CSS selectors for navigation
+const navigationPrevEl = ".custom-swiper-prev";
+const navigationNextEl = ".custom-swiper-next";
+
+export function SliderComp({ imgs }: { imgs: string[] }) {
+  return (
+    <div>
+      <div className="flex items-center justify-center relative">
+        <Swiper
+          modules={[Navigation]}
+          navigation={{
+            // Pass the class selectors here
+            prevEl: navigationPrevEl,
+            nextEl: navigationNextEl,
+          }}
+          pagination={{ clickable: true }}
+          className="w-full h-96 md:h-125 bg-white rounded-lg overflow-hidden shadow-lg"
+        >
+          {imgs.map((image, index) => (
+            <SwiperSlide
+              key={index}
+              className="bg-white flex items-center justify-center"
+            >
+              <img
+                src={image || "/placeholder.svg"}
+                alt={`${DATA[0].title} - ${index + 1}`}
+                className="w-full h-full object-contain p-4"
+              />
+            </SwiperSlide>
+          ))}
+        </Swiper>
+        {/* Custom buttons */}
+        <button
+          className={`${navigationPrevEl.replace(
+            ".",
+            "",
+          )} absolute z-10 top-1/2 left-5 rounded-sm pb-2 w-8 h-8 bg-primary text-[30px] text-center 
+          text-white flex items-center justify-center hover:cursor-pointer transition`}
+        >
+          ‹
+        </button>
+        <button
+          className={`${navigationNextEl.replace(
+            ".",
+            "",
+          )} absolute z-10 top-1/2 right-5 rounded-sm pb-2 w-8 h-8 bg-primary text-[30px] text-center text-white flex items-center justify-center hover:cursor-pointer transition `}
+        >
+          ›
+        </button>
+      </div>
+    </div>
+  );
+}