This commit is contained in:
2025-12-18 17:35:46 +07:00
parent 8d2a21a88b
commit a7488565fb
9 changed files with 104 additions and 321 deletions

View File

@@ -12,49 +12,52 @@ const SliderHome: React.FC = () => {
return (
<>
<Swiper
className="box-banner-homepage relative"
modules={[Autoplay, Navigation, Pagination]}
spaceBetween={12}
slidesPerView={1}
loop={true}
>
{dataSlider?.banner_slider_homepage_main?.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>
<Swiper
className="box-banner-under-slider"
modules={[Autoplay, Navigation, Pagination]}
spaceBetween={12}
slidesPerView={2}
loop={true}
>
{dataSlider?.banner_under_slider_trangchu?.map((banner, index) => (
<SwiperSlide key={index} className="item">
<Link href={banner.desUrl} className="item-banner boder-radius-10">
<Image
src={banner.fileUrl}
width={banner.width}
height={banner.height}
alt={banner.title}
className="lazy boder-radius-10"
/>
</Link>
</SwiperSlide>
))}
</Swiper>
<div className="box-banner-homepage relative">
<Swiper
modules={[Autoplay, Navigation, Pagination]}
spaceBetween={12}
slidesPerView={1}
loop={true}
>
{dataSlider?.banner_slider_homepage_main?.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>
<div className="box-banner-under-slider">
<Swiper
modules={[Autoplay, Navigation, Pagination]}
spaceBetween={12}
slidesPerView={2}
loop={true}
navigation={true}
>
{dataSlider?.banner_under_slider_trangchu?.map((banner, index) => (
<SwiperSlide key={index} className="item">
<Link href={banner.desUrl} className="item-banner boder-radius-10">
<Image
src={banner.fileUrl}
width={banner.width}
height={banner.height}
alt={banner.title}
className="lazy boder-radius-10"
/>
</Link>
</SwiperSlide>
))}
</Swiper>
</div>
</>
);
};