39 lines
1.0 KiB
TypeScript
39 lines
1.0 KiB
TypeScript
|
'use client';
|
||
|
|
import { Swiper, SwiperSlide } from 'swiper/react';
|
||
|
|
import { Autoplay, Navigation, Pagination } from 'swiper/modules';
|
||
|
|
import Image from 'next/image';
|
||
|
|
import Link from 'next/link';
|
||
|
|
import { bannerData } from '@/data/banner';
|
||
|
|
|
||
|
|
const Slider = () => {
|
||
|
|
const dataSlider = bannerData[0].header;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="banner-buildpc" style={{ marginBottom: '40px' }}>
|
||
|
|
<Swiper
|
||
|
|
modules={[Autoplay, Navigation, Pagination]}
|
||
|
|
spaceBetween={12}
|
||
|
|
slidesPerView={1}
|
||
|
|
loop={true}
|
||
|
|
>
|
||
|
|
{dataSlider?.banner_buildpc?.map((banner, index) => (
|
||
|
|
<SwiperSlide key={index}>
|
||
|
|
<Link href={banner.desUrl} className="item-banner boder-radius-10">
|
||
|
|
<Image
|
||
|
|
src={banner.fileUrl}
|
||
|
|
width={1909}
|
||
|
|
height={57}
|
||
|
|
alt={banner.title}
|
||
|
|
priority={true}
|
||
|
|
className="boder-radius-10"
|
||
|
|
/>
|
||
|
|
</Link>
|
||
|
|
</SwiperSlide>
|
||
|
|
))}
|
||
|
|
</Swiper>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default Slider;
|