everything

components/pageParts/newsSlider.tsx

@@ -4,44 +4,37 @@ 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";
+import { sliderData } from "@/data";
 
 // 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">
+    <div dir="ltr" className="max-w-[1400px] w-full mx-auto relative my-20">
       {/* Title */}
-      <div className="my-10 mb-20 flex items-center justify-between">
-        <Title text="news-h2" />
+      <div className="my-10 mb-20 flex items-center justify-between ">
+        <div className="">
+          <Title text="news-h2" />
+        </div>
+
+         {/* Custom buttons */}
+      <div className="flex gap-2 items-center justify-center">
+        <button
+          className={`${navigationPrevEl.replace('.', '')} w-10 h-10  p-0 bg-primary text-[30px] text-center text-white flex items-center justify-center hover:bg-secondary hover:cursor-pointer transition`}
+        >
+          ‹
+        </button>
+        <button
+          className={`${navigationNextEl.replace('.', '')} w-10 h-10 bg-primary text-[30px] text-center text-white flex items-center justify-center hover:bg-secondary hover:cursor-pointer transition `}
+        >
+          ›
+        </button>
+      </div>
+
       </div>
 
       {/* Swiper */}
@@ -61,26 +54,13 @@ export default function CustomSlider() {
           1024: { slidesPerView: 3 },
         }}
       >
-        {data.map((item, index) => (
+        {sliderData.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>
   );
 }