swiper slider

components/pageParts/partners.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import Title from "../tools/title";
+
+import React from "react";
+// Import Swiper React components
+import { Swiper, SwiperSlide } from "swiper/react";
+
+// import required modules
+import { Autoplay } from "swiper/modules";
+
+// Import Swiper styles
+import "swiper/css";
+
+//all images
+import { Ezgu, Fidokor, Kohota, Minerva, NRG, ToshCity } from "@/assets";
+import Image, { StaticImageData } from "next/image";
+
+const images: StaticImageData[] = [
+  Ezgu,
+  Fidokor,
+  Kohota,
+  Minerva,
+  NRG,
+  ToshCity,
+];
+
+export default function Partners() {
+  return (
+    <div className="my-5 max-w-[1200px] w-full mx-auto ">
+      {/* title */}
+      <div className="mb-4">
+        <Title text="partner-h2" />
+      </div>
+
+      {/* slider */}
+      <div className="my-10">
+        <Swiper
+          autoplay={{
+            reverseDirection:true,
+            delay: 2500,
+            disableOnInteraction: false,
+          }}
+          modules={[Autoplay]}
+          slidesPerView={4}
+          className="mySwiper flex items-center justify-center"
+        >
+          {images.map((item, index) => (
+            <SwiperSlide key={index}>
+              <Image
+                src={item}
+                alt="Partner images"
+                className="w-[200px] h-[200px] object-contain"
+              />
+            </SwiperSlide>
+          ))}
+        </Swiper>
+      </div>
+    </div>
+  );
+}

components/pageParts/texnika.tsx

@@ -1,10 +1,22 @@
 "use client";
 
-import Marquee from "react-fast-marquee";
 import Title from "../tools/title";
 import { Gehl, Hyundai, JCB, Lonking, Mitsubishi, XCMG } from "@/assets";
 import Image, { StaticImageData } from "next/image";
 
+// ========== React Swiper ============ ///
+
+// Import Swiper React components
+import { Swiper, SwiperSlide } from "swiper/react";
+
+// import required modules
+import { Autoplay } from "swiper/modules";
+
+// Import Swiper styles
+import "swiper/css";
+
+// ========== React Swiper ============ ///
+
 const slideImage: StaticImageData[] = [
   Lonking,
   Hyundai,
@@ -17,26 +29,34 @@ const slideImage: StaticImageData[] = [
 export default function Texnika() {
   return (
     <div className="flex flex-col items-center justify-center gap-20 mt-20 max-w-[1200px] w-full mx-auto">
-      <Title text="brand-h2" />
-      <Marquee
-        direction="left"
-        className="ml-20"
-      >
-        {slideImage.map((item, index) => (
-          <div
-            key={index}
-            className="mx-10 min-w-[200px] flex items-center justify-center"
-          >
-            <Image
-              src={item}
-              alt={`Brand ${index}`}
-              width={200}
-              height={200}
-              className="object-contain"
-            />
-          </div>
-        ))}
-      </Marquee>
+      {/* title */}
+      <div className="mb-4">
+        <Title text="brand-h2" />
+      </div>
+
+      {/* slider */}
+      <div className="my-10">
+        <Swiper
+          autoplay={{
+            reverseDirection: true,
+            delay: 2500,
+            disableOnInteraction: false,
+          }}
+          modules={[Autoplay]}
+          slidesPerView={4}
+          className="mySwiper flex items-center justify-center"
+        >
+          {slideImage.map((item, index) => (
+            <SwiperSlide key={index}>
+              <Image
+                src={item}
+                alt="Partner images"
+                className="w-[200px] h-[200px] object-contain"
+              />
+            </SwiperSlide>
+          ))}
+        </Swiper>
+      </div>
     </div>
   );
 }