77 lines
2.2 KiB
TypeScript
77 lines
2.2 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import {
|
|
Button,
|
|
Card,
|
|
CardFooter,
|
|
CircularProgress,
|
|
ScrollShadow,
|
|
} from "@heroui/react";
|
|
import { ChevronLeftIcon, ChevronRightIcon, EyeIcon } from "../icons";
|
|
import { Swiper, SwiperSlide, useSwiper } from "swiper/react";
|
|
import "swiper/css";
|
|
import "swiper/css/navigation";
|
|
import Link from "next/link";
|
|
|
|
import { Autoplay, Pagination, Navigation, Controller } from "swiper/modules";
|
|
const datas = [
|
|
{ id: 1, src: "/props-1.png" },
|
|
{ id: 2, src: "/props-2.png" },
|
|
{ id: 2, src: "/props-3.png" },
|
|
];
|
|
export default function AddsCarousel() {
|
|
return (
|
|
<div className="w-[90%] lg:w-[75%] mx-auto">
|
|
{datas ? (
|
|
<Swiper
|
|
centeredSlides={true}
|
|
autoplay={{
|
|
delay: 5000,
|
|
disableOnInteraction: false,
|
|
}}
|
|
navigation={true}
|
|
modules={[Autoplay, Controller, Navigation]}
|
|
className="mySwiper"
|
|
onSwiper={(swiper) => {
|
|
swiper.navigation.nextEl?.classList.add(
|
|
"bg-white/70",
|
|
"!text-black",
|
|
"rounded-full",
|
|
"!w-[40px]",
|
|
"!h-[40px]"
|
|
);
|
|
swiper.navigation.prevEl?.classList.add(
|
|
"bg-white/70",
|
|
"!text-black",
|
|
"rounded-full",
|
|
"!w-[40px]",
|
|
"!h-[40px]"
|
|
);
|
|
}}
|
|
>
|
|
{datas?.map((newsItem: any, index: number) => (
|
|
<SwiperSlide key={newsItem?.id} className="h-[20vh] lg:h-[50vh]">
|
|
<Card
|
|
isFooterBlurred
|
|
radius="lg"
|
|
className="border-none h-[20vh] lg:h-[50vh] shadow-none"
|
|
>
|
|
<Image
|
|
alt="headernews"
|
|
width={1440}
|
|
height={1080}
|
|
src={newsItem?.src == "" ? "/no-image.jpg" : newsItem?.src}
|
|
className="w-full h-[20vh] lg:!h-[50vh] object-cover rounded-lg"
|
|
/>
|
|
</Card>
|
|
</SwiperSlide>
|
|
))}
|
|
</Swiper>
|
|
) : (
|
|
<CircularProgress aria-label="Loading..." size="lg" />
|
|
)}
|
|
</div>
|
|
);
|
|
}
|