66 lines
1.5 KiB
TypeScript
66 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import Title from "../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,
|
|
Gehl,
|
|
JCB,
|
|
Mitsubishi,
|
|
XCMG,
|
|
];
|
|
|
|
export default function Texnika() {
|
|
return (
|
|
<div className="my-20 max-w-[1100px] w-full mx-auto">
|
|
{/* title */}
|
|
<div className="mb-4">
|
|
<Title text="brand-h2" />
|
|
</div>
|
|
|
|
{/* slider */}
|
|
<div className="my-20">
|
|
<Swiper
|
|
autoplay={{
|
|
reverseDirection: true,
|
|
delay: 2500,
|
|
disableOnInteraction: false,
|
|
}}
|
|
loop={true}
|
|
modules={[Autoplay]}
|
|
slidesPerView={4}
|
|
className="mySwiper flex items-center justify-around"
|
|
>
|
|
{slideImage.map((item, index) => (
|
|
<SwiperSlide key={index} className="!w-[200px] mx-10 " >
|
|
<Image
|
|
src={item}
|
|
alt="Partner images"
|
|
width={200}
|
|
height={200}
|
|
className="object-contain mx-auto max-w-[200px] h-auto"
|
|
/>
|
|
</SwiperSlide>
|
|
))}
|
|
</Swiper>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|