hero sllider

components/pageParts/hero.tsx

@@ -3,6 +3,39 @@
 import { motion } from "framer-motion";
 import Image from "next/image";
 import Text from "../lib_components/text";
+import { Swiper, SwiperSlide } from "swiper/react";
+import { Navigation, Autoplay } from "swiper/modules";
+import "swiper/css";
+import "swiper/css/navigation";
+import { ArrowLeft, ArrowRight } from "lucide-react";
+
+const slider = [
+  {
+    id: 1,
+    image: "/2.jpg",
+    title:
+      "Ishonchli SpesTexnika — sizning loyihangiz uchun eng yaxshi tanlov!",
+    desc: "Biz eng so‘nggi texnikalar, maxsus transportlar va qurilish uskunalarini qulay narxda taqdim etamiz.",
+  },
+  {
+    id: 2,
+    image: "/4.jpg",
+    title:
+      "Ishonchli SpesTexnika — sizning loyihangiz uchun eng yaxshi tanlov!",
+    desc: "Biz eng so‘nggi texnikalar, maxsus transportlar va qurilish uskunalarini qulay narxda taqdim etamiz.",
+  },
+  {
+    id: 3,
+    image: "/3.webp",
+    title:
+      "Ishonchli SpesTexnika — sizning loyihangiz uchun eng yaxshi tanlov!",
+    desc: "Biz eng so‘nggi texnikalar, maxsus transportlar va qurilish uskunalarini qulay narxda taqdim etamiz.",
+  },
+];
+
+// The custom CSS selectors for navigation
+const navigationPrevEl = ".hero-swiper-prev";
+const navigationNextEl = ".hero-swiper-next";
 
 export default function HeroSection() {
   return (
@@ -10,39 +43,54 @@ export default function HeroSection() {
       dir="ltr"
       className="relative w-full md:h-[500px] max-md:py-10 max-lg:px-2 overflow-hidden flex items-center justify-between"
     >
-      {/* <Image
+      {/* Custom buttons */}
-        src="/hero2.jpg" // public papkaga rasm joylash (masalan, texnika rasmi)
+        <button
-        alt="SpetsTexnika"
+          className={`${navigationPrevEl.replace(
-        width={800}
+            ".",
-        height={400}
+            ""
-        className="object-contain rounded-3xl"
+          )} w-10 h-10 absolute z-10 left-[10%] top-50  p-0 bg-primary text-[30px] text-center text-white flex items-center justify-center hover:bg-secondary hover:cursor-pointer transition`}
-      /> */}
+        >
-
+          <ArrowLeft />
-      {/* Asosiy kontent */}
+        </button>
-      {/* <div className="absolute inset-0 -z-10 mx-auto w-full h-full">
+        <button
-        <Image
+          className={`${navigationNextEl.replace(
-          src="/2.jpg" 
+            ".",
-          alt="SpetsTexnika"
+            ""
-          fill
+          )} w-10 h-10 absolute z-10 right-[10%] top-50  bg-primary text-[30px] text-center text-white flex items-center justify-center hover:bg-secondary hover:cursor-pointer transition `}
-          className="object-cover"
+        >
-          priority
+          <ArrowRight />
-        />
+        </button>
-      </div> */}
+      <Swiper
-
+        modules={[Navigation, Autoplay]}
+        slidesPerView={1}
+        spaceBetween={30}
+        loop={true}
+        navigation={{
+          // Pass the class selectors here
+          prevEl: navigationPrevEl,
+          nextEl: navigationNextEl,
+        }}
+        autoplay={{
+          delay: 5000,
+          disableOnInteraction: false,
+        }}
+      >
+        {slider.map((item, index) => (
+          <SwiperSlide key={index}>
             <div className="relative z-20 max-w-7xl w-full mx-auto md:px-6 px-3 text-primary flex flex-col md:flex-row items-center gap-5 justify-between">
               {/* Chap tomondagi matn */}
               <motion.div
-          className="space-y-3 max-w-xl backdrop-blur-3xl bg-[#ffffff4a] rounded-xl py-6 px-4"
+                className="space-y-3 max-w-xl backdrop-blur-3xl rounded-xl py-6 px-4"
                 initial={{ opacity: 0, x: -60 }}
                 animate={{ opacity: 1, x: 0 }}
                 transition={{ duration: 0.8, ease: "easeOut" }}
               >
                 <div className="text-2xl lg:text-4xl font-extrabold leading-tight text-primary">
-            <Text txt="hero_title"/>
+                  <Text txt="hero_title" />
                 </div>
 
                 <div className="text-xl font-medium text-secondary">
-            <Text txt="hero_desc"/>
+                  <Text txt="hero_desc" />
                 </div>
               </motion.div>
 
@@ -54,22 +102,17 @@ export default function HeroSection() {
                 transition={{ duration: 0.8, delay: 0.3, ease: "easeOut" }}
               >
                 <Image
-            src="/2.jpg" // texnika rasmi (public/truck.png)
+                  src={item.image} // texnika rasmi (public/truck.png)
                   alt="SpetsTexnika yuk mashinasi"
-            width={420}
+                  width={620}
                   height={300}
                   className="drop-shadow-2xl rounded-xl"
                 />
               </motion.div>
             </div>
-
+          </SwiperSlide>
-      {/* Pastdagi to‘lqinli animatsiya (dekor) */}
+        ))}
-      {/* <motion.div
+      </Swiper>
-        className="absolute bottom-0 left-0 w-full h-[100px]"
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        transition={{ duration: 1.2 }}
-      /> */}
     </section>
   );
 }

package-lock.json

@@ -25,7 +25,7 @@
         "react-icons": "^5.5.0",
         "react-leaflet": "^5.0.0",
         "react-scroll": "^1.9.3",
-        "swiper": "^12.0.2"
+        "swiper": "^12.0.3"
       },
       "devDependencies": {
         "@tailwindcss/postcss": "^4.1.14",
@@ -3414,9 +3414,9 @@
       "license": "MIT"
     },
     "node_modules/swiper": {
-      "version": "12.0.2",
+      "version": "12.0.3",
-      "resolved": "https://registry.npmjs.org/swiper/-/swiper-12.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-12.0.3.tgz",
-      "integrity": "sha512-y8F6fDGXmTVVgwqJj6I00l4FdGuhpFJn0U/9Ucn1MwWOw3NdLV8aH88pZOjyhBgU/6PyBlUx+JuAQ5KMWz906Q==",
+      "integrity": "sha512-BHd6U1VPEIksrXlyXjMmRWO0onmdNPaTAFduzqR3pgjvi7KfmUCAm/0cj49u2D7B0zNjMw02TSeXfinC1hDCXg==",
       "funding": [
         {
           "type": "patreon",

package.json

@@ -25,7 +25,7 @@
     "react-icons": "^5.5.0",
     "react-leaflet": "^5.0.0",
     "react-scroll": "^1.9.3",
-    "swiper": "^12.0.2"
+    "swiper": "^12.0.3"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.14",