60 lines
1.9 KiB
TypeScript
60 lines
1.9 KiB
TypeScript
import { Swiper, SwiperSlide } from "swiper/react";
|
||
import { Navigation } from "swiper/modules";
|
||
import "swiper/css";
|
||
import "swiper/css/navigation";
|
||
import { DATA } from "@/lib/demoData";
|
||
|
||
// The custom CSS selectors for navigation
|
||
const navigationPrevEl = ".custom-swiper-prev";
|
||
const navigationNextEl = ".custom-swiper-next";
|
||
|
||
export function SliderComp({ imgs }: { imgs: string[] }) {
|
||
return (
|
||
<div>
|
||
<div className="flex items-center justify-center relative">
|
||
<Swiper
|
||
modules={[Navigation]}
|
||
navigation={{
|
||
// Pass the class selectors here
|
||
prevEl: navigationPrevEl,
|
||
nextEl: navigationNextEl,
|
||
}}
|
||
pagination={{ clickable: true }}
|
||
className="w-full h-96 md:h-125 bg-white rounded-lg overflow-hidden shadow-lg"
|
||
>
|
||
{imgs.map((image, index) => (
|
||
<SwiperSlide
|
||
key={index}
|
||
className="bg-white flex items-center justify-center"
|
||
>
|
||
<img
|
||
src={image || "/placeholder.svg"}
|
||
alt={`${DATA[0].title} - ${index + 1}`}
|
||
className="w-full h-full object-contain p-4"
|
||
/>
|
||
</SwiperSlide>
|
||
))}
|
||
</Swiper>
|
||
{/* Custom buttons */}
|
||
<button
|
||
className={`${navigationPrevEl.replace(
|
||
".",
|
||
"",
|
||
)} absolute z-10 top-1/2 left-5 rounded-sm pb-2 w-8 h-8 bg-primary text-[30px] text-center
|
||
text-white flex items-center justify-center hover:cursor-pointer transition`}
|
||
>
|
||
‹
|
||
</button>
|
||
<button
|
||
className={`${navigationNextEl.replace(
|
||
".",
|
||
"",
|
||
)} absolute z-10 top-1/2 right-5 rounded-sm pb-2 w-8 h-8 bg-primary text-[30px] text-center text-white flex items-center justify-center hover:cursor-pointer transition `}
|
||
>
|
||
›
|
||
</button>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|