fixed carousal layout

This commit is contained in:
Tejas Panchal
2025-07-27 18:09:53 +05:30
parent 55062e42bd
commit d6af291cde
4 changed files with 66 additions and 120 deletions

View File

@@ -11,10 +11,6 @@ const Spotlight = ({ spotlights }) => {
return (
<>
<div className="relative h-[450px] max-[1390px]:h-[400px] max-[1300px]:h-[350px] max-md:h-[300px] pt-[20px]">
<div className="absolute right-[10px] top-[30px] flex space-x-2 z-10 max-[575px]:top-[10px] max-[575px]:right-[10px]">
<div className="button-prev"></div>
<div className="button-next"></div>
</div>
{spotlights && spotlights.length > 0 ? (
<>
<Swiper
@@ -35,12 +31,16 @@ const Spotlight = ({ spotlights }) => {
disableOnInteraction: false,
}}
modules={[Navigation, Autoplay, Pagination]}
className="h-[450px] max-[1390px]:h-full"
className="h-[450px] max-[1390px]:h-full rounded-2xl overflow-hidden relative"
style={{
"--swiper-pagination-bullet-inactive-color": "rgba(255, 255, 255, 0.5)",
"--swiper-pagination-bullet-inactive-opacity": "1",
}}
>
<div className="absolute right-[20px] top-[20px] flex space-x-1.5 z-[5]">
<div className="button-prev"></div>
<div className="button-next"></div>
</div>
{spotlights.map((item, index) => (
<SwiperSlide className="text-black relative" key={index}>
<Banner item={item} index={index} />