74 lines
2.1 KiB
TypeScript
74 lines
2.1 KiB
TypeScript
"use client";
|
||
|
||
import { Swiper, SwiperSlide } from "swiper/react";
|
||
import { Navigation } from "swiper/modules";
|
||
import "swiper/css";
|
||
import "swiper/css/navigation";
|
||
import Title from "../lib_components/title";
|
||
import SliderCard from "../cards/sliderCard";
|
||
import { sliderData } from "@/data";
|
||
|
||
// The custom CSS selectors for navigation
|
||
const navigationPrevEl = ".custom-swiper-prev";
|
||
const navigationNextEl = ".custom-swiper-next";
|
||
|
||
export default function CustomSlider() {
|
||
return (
|
||
<div
|
||
dir="ltr"
|
||
className="max-w-[1400px] w-full mx-auto relative my-20 px-4"
|
||
>
|
||
{/* Title */}
|
||
<div className="my-10 mb-20 flex items-center justify-between ">
|
||
<div className="">
|
||
<Title text="news-h2" />
|
||
</div>
|
||
|
||
{/* Custom buttons */}
|
||
<div className="flex gap-2 items-center justify-center">
|
||
<button
|
||
className={`${navigationPrevEl.replace(
|
||
".",
|
||
""
|
||
)} w-10 h-10 p-0 bg-primary text-[30px] text-center text-white flex items-center justify-center hover:bg-secondary hover:cursor-pointer transition`}
|
||
>
|
||
‹
|
||
</button>
|
||
<button
|
||
className={`${navigationNextEl.replace(
|
||
".",
|
||
""
|
||
)} w-10 h-10 bg-primary text-[30px] text-center text-white flex items-center justify-center hover:bg-secondary hover:cursor-pointer transition `}
|
||
>
|
||
›
|
||
</button>
|
||
</div>
|
||
</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 },
|
||
}}
|
||
>
|
||
{sliderData.map((item, index) => (
|
||
<SwiperSlide key={index}>
|
||
<SliderCard data={item} />
|
||
</SwiperSlide>
|
||
))}
|
||
</Swiper>
|
||
</div>
|
||
);
|
||
}
|