63 lines
1.5 KiB
TypeScript
63 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
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,
|
|
Gehl,
|
|
JCB,
|
|
Mitsubishi,
|
|
XCMG,
|
|
];
|
|
|
|
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 */}
|
|
<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>
|
|
);
|
|
}
|