ducdt/hoanghapc_nextJs
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update 14/01

Browse Source
This commit is contained in:
Dao Duc
2026-01-14 17:31:59 +07:00
parent 229bdbde54
commit f5de4a5313
36 changed files with 14527 additions and 2423 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
src/components/home/Slider/index.tsx
View File

@@ -1,8 +1,16 @@
'use client';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Navigation, Pagination, Autoplay } from 'swiper/modules';
import { banner } from '@/data/banner'
import ImageItem from '@/components/shared/ImageItem';
import ImageList from './ImageList';
export default function Slider() {
const bannerSlider = banner.homepage['2022_home_slider'] ?? [];
const bannerRight = banner.homepage['2022_home_right_slider'] ?? [];
const bannerUnder = banner.homepage['2022_home_under_slider'] ?? [];
const underSlider = banner.homepage['2022_4_under_slider'] ?? [];
return(
<div className="home-banner-container mb-10 min-h-[845px]">
<div className="banner-slider gap-4 grid grid-cols-3 w-[932px] m-[auto_0_auto_auto]">
@@ -19,29 +27,14 @@ export default function Slider() {
}}
pagination={{ clickable: true }}
>
<SwiperSlide>
<a href="">
<img src="/images/homepage/home-slide.png" alt="" width={100} height={100} className="block w-full lazy"/>
</a>
</SwiperSlide>
<SwiperSlide>
<a href="">
<img src="https://placehold.co/792x543/EEE/31343C" alt="" width="" height="" className="block w-full lazy"/>
</a>
</SwiperSlide>
<SwiperSlide>
<a href="">
<img src="https://placehold.co/792x543/EEE/31343C" alt="" width="" height="" className="block w-full lazy"/>
</a>
</SwiperSlide>
<SwiperSlide>
<a href="">
<img src="https://placehold.co/792x543/EEE/31343C" alt="" width="" height="" className="block w-full lazy"/>
</a>
</SwiperSlide>
{
bannerSlider.map((item:any) =>
<SwiperSlide key={item.id}>
<ImageItem item={item} />
</SwiperSlide>
)
}
</Swiper>
<div className="custom-nav hidden">
@@ -58,34 +51,22 @@ export default function Slider() {
</div>
</div>
<div className="home-banner-right col-span-1">
<a href="" className="last:mb-0 mb-4">
<img src="images/homepage/right-1.png" alt="" width="" height="" className="block w-full lazy"/>
</a>
<ImageList
data={bannerRight}
className="home-banner-right col-span-1"
/>
<a href="" className="last:mb-0 mb-4">
<img src="images/homepage/right-2.png" alt="" width="" height="" className="block w-full lazy"/>
</a>
</div>
<div className="home-banner-right grid grid-cols-3 gap-4 col-span-3">
<a href="">
<img src="images/homepage/under-slide-1.png" alt="" width="" height="" className="block w-full lazy"/>
</a>
<a href=""> <img src="images/homepage/under-slide-2.png" alt="" width="" height="" className="block w-full lazy"/> </a> <a href=""> <img src="images/homepage/under-slide-3.png" alt="" width="" height="" className="block w-full lazy"/> </a>
</div>
<ImageList
data={bannerUnder}
className="grid grid-cols-3 gap-4 col-span-3"
/>
</div>
<div className="grid grid-cols-4 gap-4 mt-4">
<a href="">
<img src="images/homepage/under-1.png" alt="" width="" height="" className="block w-full lazy"/>
</a>
<a href=""> <img src="images/homepage/under-2.png" alt="" width="" height="" className="block w-full lazy"/> </a>
<a href=""> <img src="images/homepage/under-3.png" alt="" width="" height="" className="block w-full lazy"/> </a>
<a href=""> <img src="images/homepage/under-4.png" alt="" width="" height="" className="block w-full lazy"/> </a>
</div>
<ImageList
data={underSlider}
className="grid grid-cols-4 gap-4 mt-4"
/>
</div>
)
}