87 lines
2.3 KiB
TypeScript
87 lines
2.3 KiB
TypeScript
"use client";
|
||
|
||
import { Swiper, SwiperSlide } from "swiper/react";
|
||
import { Navigation } from "swiper/modules";
|
||
import "swiper/css";
|
||
import "swiper/css/navigation";
|
||
import Image from "next/image";
|
||
import Title from "../title";
|
||
import SliderCard from "../cards/sliderCard";
|
||
|
||
// The custom CSS selectors for navigation
|
||
const navigationPrevEl = ".custom-swiper-prev";
|
||
const navigationNextEl = ".custom-swiper-next";
|
||
|
||
const data = [
|
||
{
|
||
id: 1,
|
||
image: "/images/yuklagich.jpg",
|
||
title: "Old Yuklagich",
|
||
text: "Yangi yuklagich siz uchun eng yaxshi texnika!",
|
||
path: "",
|
||
},
|
||
{
|
||
id: 2,
|
||
image: "/images/kompressor.jpg",
|
||
title: "Kompressor",
|
||
text: "Yangi kompressorlar to'plami aynan siz uchun",
|
||
path: "",
|
||
},
|
||
{
|
||
id: 3,
|
||
image: "/images/avtokran.jpg",
|
||
title: "Avtokran",
|
||
text: "Bizning kuchli kranlarimiz bilan ishingiz yanada osonlashadi.",
|
||
path: "",
|
||
},
|
||
];
|
||
|
||
export default function CustomSlider() {
|
||
return (
|
||
<div dir="ltr" className="w-full relative">
|
||
{/* Title */}
|
||
<div className="my-10 mb-20 flex items-center justify-between">
|
||
<Title text="news-h2" />
|
||
</div>
|
||
|
||
{/* Swiper */}
|
||
<Swiper
|
||
modules={[Navigation]}
|
||
slidesPerView={3}
|
||
spaceBetween={30}
|
||
loop={true}
|
||
navigation={{
|
||
// Pass the class selectors here
|
||
prevEl: navigationPrevEl,
|
||
nextEl: navigationNextEl,
|
||
}}
|
||
breakpoints={{
|
||
0: { slidesPerView: 1 },
|
||
768: { slidesPerView: 2 },
|
||
1024: { slidesPerView: 3 },
|
||
}}
|
||
>
|
||
{data.map((item, index) => (
|
||
<SwiperSlide key={index}>
|
||
<SliderCard data={item} />
|
||
</SwiperSlide>
|
||
))}
|
||
</Swiper>
|
||
|
||
{/* Custom buttons */}
|
||
<div className="absolute top-1/2 right-4 flex gap-2 -translate-y-1/2">
|
||
<button
|
||
className={`${navigationPrevEl.replace('.', '')} w-10 h-10 bg-blue-900 text-white flex items-center justify-center rounded hover:bg-blue-700 transition`}
|
||
>
|
||
‹
|
||
</button>
|
||
<button
|
||
className={`${navigationNextEl.replace('.', '')} w-10 h-10 bg-blue-900 text-white flex items-center justify-center rounded hover:bg-blue-700 transition`}
|
||
>
|
||
›
|
||
</button>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|