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

upload 29/12

Browse Source
This commit is contained in:
Dao Duc
2025-12-29 17:43:31 +07:00
parent 1be2e55959
commit 19b55a3d93
138 changed files with 18742 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
src/components/home/Slider/index.tsx Normal file
View File

@@ -0,0 +1,91 @@
'use client';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Navigation, Pagination, Autoplay } from 'swiper/modules';
export default function 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]">
<div className="home-banner-left col-span-2 custom-dots relative group ">
<Swiper
spaceBetween={50}
slidesPerView={1}
loop={true}
autoplay={{ delay: 3000 }}
modules={[Navigation, Pagination, Autoplay]}
navigation={{
prevEl: ".custom-nav .swiper-button-prev",
nextEl: ".custom-nav .swiper-button-next",
}}
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>
</Swiper>
<div className="custom-nav hidden">
<div
className="button-icon swiper-button-prev"
role="button"
aria-label="Previous slide"
/>
<div
className="button-icon swiper-button-next"
role="button"
aria-label="Next slide"
/>
</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>
<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>
</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>
</div>
)
}