swiper slider

app/page.tsx

@@ -5,6 +5,7 @@ import Products from "@/components/pageParts/products";
 import Texnika from "@/components/pageParts/texnika";
 import Offer from "@/components/pageParts/offer";
 import Faq from "@/components/pageParts/faq";
+import Partners from "@/components/pageParts/partners";
 
 export default function Home() {
   return (
@@ -17,6 +18,7 @@ export default function Home() {
       <Texnika/>
       <Offer/>
       <Faq/>
+      <Partners/>
     </div>
   );
 }

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" />
+      {/* title */}
-      <Marquee
+      <div className="mb-4">
-        direction="left"
+        <Title text="brand-h2" />
-        className="ml-20"
+      </div>
-      >
+
-        {slideImage.map((item, index) => (
+      {/* slider */}
-          <div
+      <div className="my-10">
-            key={index}
+        <Swiper
-            className="mx-10 min-w-[200px] flex items-center justify-center"
+          autoplay={{
-          >
+            reverseDirection: true,
-            <Image
+            delay: 2500,
-              src={item}
+            disableOnInteraction: false,
-              alt={`Brand ${index}`}
+          }}
-              width={200}
+          modules={[Autoplay]}
-              height={200}
+          slidesPerView={4}
-              className="object-contain"
+          className="mySwiper flex items-center justify-center"
-            />
+        >
-          </div>
+          {slideImage.map((item, index) => (
-        ))}
+            <SwiperSlide key={index}>
-      </Marquee>
+              <Image
+                src={item}
+                alt="Partner images"
+                className="w-[200px] h-[200px] object-contain"
+              />
+            </SwiperSlide>
+          ))}
+        </Swiper>
+      </div>
     </div>
   );
 }

package-lock.json

@@ -20,7 +20,8 @@
         "react-fast-marquee": "^1.6.5",
         "react-i18next": "^16.0.0",
         "react-icons": "^5.5.0",
-        "react-scroll": "^1.9.3"
+        "react-scroll": "^1.9.3",
+        "swiper": "^12.0.2"
       },
       "devDependencies": {
         "@tailwindcss/postcss": "^4.1.14",
@@ -3031,6 +3032,25 @@
       "integrity": "sha512-yQ3rwFWRfwNUY7H5vpU0wfdkNSnvnJinhF9830Swlaxl03zsOjCfmX0ugac+3LtK0lYSgwL/KXc8oYL3mG4YFQ==",
       "license": "MIT"
     },
+    "node_modules/swiper": {
+      "version": "12.0.2",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-12.0.2.tgz",
+      "integrity": "sha512-y8F6fDGXmTVVgwqJj6I00l4FdGuhpFJn0U/9Ucn1MwWOw3NdLV8aH88pZOjyhBgU/6PyBlUx+JuAQ5KMWz906Q==",
+      "funding": [
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/swiperjs"
+        },
+        {
+          "type": "open_collective",
+          "url": "http://opencollective.com/swiper"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4.7.0"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "4.1.14",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.14.tgz",

package.json

@@ -20,7 +20,8 @@
     "react-fast-marquee": "^1.6.5",
     "react-i18next": "^16.0.0",
     "react-icons": "^5.5.0",
-    "react-scroll": "^1.9.3"
+    "react-scroll": "^1.9.3",
+    "swiper": "^12.0.2"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.14",