products

components/pageParts/newsSlider.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import { Swiper, SwiperSlide } from "swiper/react";
+import { Navigation } from "swiper/modules";
+import "swiper/css";
+import "swiper/css/navigation";
+import Image from "next/image";
+import Title from "../title";
+import SliderCard from "../cards/sliderCard";
+
+// The custom CSS selectors for navigation
+const navigationPrevEl = ".custom-swiper-prev";
+const navigationNextEl = ".custom-swiper-next";
+
+const data = [
+  {
+    id: 1,
+    image: "/images/yuklagich.jpg",
+    title: "Old Yuklagich",
+    text: "Yangi yuklagich siz uchun eng yaxshi texnika!",
+    path: "",
+  },
+  {
+    id: 2,
+    image: "/images/kompressor.jpg",
+    title: "Kompressor",
+    text: "Yangi kompressorlar to'plami aynan siz uchun",
+    path: "",
+  },
+  {
+    id: 3,
+    image: "/images/avtokran.jpg",
+    title: "Avtokran",
+    text: "Bizning kuchli kranlarimiz bilan ishingiz yanada osonlashadi.",
+    path: "",
+  },
+];
+
+export default function CustomSlider() {
+  return (
+    <div dir="ltr" className="w-full relative">
+      {/* Title */}
+      <div className="my-10 mb-20 flex items-center justify-between">
+        <Title text="news-h2" />
+      </div>
+
+      {/* Swiper */}
+      <Swiper
+        modules={[Navigation]}
+        slidesPerView={3}
+        spaceBetween={30}
+        loop={true}
+        navigation={{
+          // Pass the class selectors here
+          prevEl: navigationPrevEl,
+          nextEl: navigationNextEl,
+        }}
+        breakpoints={{
+          0: { slidesPerView: 1 },
+          768: { slidesPerView: 2 },
+          1024: { slidesPerView: 3 },
+        }}
+      >
+        {data.map((item, index) => (
+          <SwiperSlide key={index}>
+            <SliderCard data={item} />
+          </SwiperSlide>
+        ))}
+      </Swiper>
+
+      {/* Custom buttons */}
+      <div className="absolute top-1/2 right-4 flex gap-2 -translate-y-1/2">
+        <button
+          className={`${navigationPrevEl.replace('.', '')} w-10 h-10 bg-blue-900 text-white flex items-center justify-center rounded hover:bg-blue-700 transition`}
+        >
+          ‹
+        </button>
+        <button
+          className={`${navigationNextEl.replace('.', '')} w-10 h-10 bg-blue-900 text-white flex items-center justify-center rounded hover:bg-blue-700 transition`}
+        >
+          ›
+        </button>
+      </div>
+    </div>
+  );
+}