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 ( return (
<> <>
<ProfileHeader/> <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 /> <Outlet />
</div> </div>
</> </>

28
src/pages/UserDashboardHome.jsx
View File

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