mageshwaran/thirukalyanamweb
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

slider

Browse Source
This commit is contained in:
Meenadeveloper 2025-11-24 14:33:04 +05:30
parent 1494e1d979
commit 916519c7c9
2 changed files with 18 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/layout/ProfileLayout.jsx
View File

@ -4,7 +4,7 @@ const ProfileLayout = () => {
return (
<>
<ProfileHeader/>
<div className="body-container body-bg w-[100%] max-w-[1400px] mx-auto p-2" style={{ marginBottom:'90px' }}>
<div className=" w-[100%] max-w-[1400px] mx-auto p-2" style={{ marginBottom:'90px', overflowX:"hidden" }}>
<Outlet />
</div>
</>

28
src/pages/UserDashboardHome.jsx
View File

@ -5,11 +5,17 @@ import 'swiper/css';
import 'swiper/css/navigation';
const images = [
"https://images.unsplash.com/photo-1612423284934-5b6e7f9e8b5e",
"https://images.unsplash.com/photo-1520975911596-5f7f2c1a1c6b",
"https://images.unsplash.com/photo-1544005313-94ddf0286df2",
"https://images.unsplash.com/photo-1494790108377-be9c29b29330",
"https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e",
"https://images.unsplash.com/photo-1494790108377-be9c29b29330",
"https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e",
"https://images.unsplash.com/photo-1494790108377-be9c29b29330",
"https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e",
"https://images.unsplash.com/photo-1494790108377-be9c29b29330",
"https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e",
"https://images.unsplash.com/photo-1494790108377-be9c29b29330",
"https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e",
];
const UserDashboardHome = () => {
return (
@ -35,7 +41,7 @@ const UserDashboardHome = () => {
grabCursor={true}
centeredSlides={true}
slidesPerView="auto"
spaceBetween={20}
spaceBetween={10}
autoplay={{
delay: 3000,
disableOnInteraction: false,
@ -45,15 +51,15 @@ const UserDashboardHome = () => {
>
{images.map((img, idx) => (
<SwiperSlide key={idx}>
<div className="relative overflow-hidden rounded-3xl shadow-2xl w-[100%] max-w-[400px] h-[280px]">
<div className="relative overflow-hidden rounded-3xl w-[100%] ">
<img
src={img}
alt={`Slide ${idx + 1}`}
className="w-full h-full object-cover"
/>
<div className="absolute bottom-6 left-1/2 -translate-x-1/2 bg-black/50 backdrop-blur-sm px-6 py-2 rounded-full">
{/* <div className="absolute bottom-6 left-1/2 -translate-x-1/2 bg-black/50 backdrop-blur-sm px-6 py-2 rounded-full">
<span className="text-white font-semibold text-lg">Slide {idx + 1}</span>
</div>
</div> */}
</div>
</SwiperSlide>
))}
@ -63,21 +69,21 @@ const UserDashboardHome = () => {
<style>{`
.swiper {
width: 100%;
padding: 60px 80px;
// padding: 60px 80px;
overflow: visible;
}
.swiper-slide {
width: 320px;
height: 420px;
height: 320px;
transition: all 0.4s ease;
opacity: 0.4;
transform: scale(0.85);
}
.swiper-slide-active {
width: 500px !important;
height: 600px !important;
width: 630px !important;
height: 320px !important;
opacity: 1;
transform: scale(1);
z-index: 2;