Untitled

import { FC } from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Autoplay, Pagination, Navigation } from 'swiper';
import 'swiper/css';
import 'swiper/css/pagination';
import 'swiper/css/navigation';
import Image from 'next/image';
import Link from 'next/link';

interface IProps {
  heroSliderImagesData: {}[];
}

const HeroSlider: FC<IProps> = ({ ...props }): JSX.Element => {
  return (
    <section>
      <Swiper
        slidesPerView={1}
        autoplay={{
          delay: 3000,
        }}
        loop
        pagination={{
          clickable: true,
        }}
        navigation
        modules={[Autoplay, Pagination, Navigation]}
        className="hero_slider overflow-hidden rounded-xl"
      >
        {props.heroSliderImagesData!.map((item: any) => {
          return (
            <SwiperSlide key={item.bannerid}>
              <Link href={item.forwardurl}>
                <div className="aspect-w-3 aspect-h-1 lg:aspect-w-4">
                  <Image
                    fill
                    src={item.imageaddress}
                    className="block rounded-xl bg-[#eee] object-center object-cover w-full h-full overflow-hidden"
                    alt="slide image"
                  />
                </div>
              </Link>
            </SwiperSlide>
          );
        })}
      </Swiper>
    </section>
  );
};

export default HeroSlider;