Scribd
Upload
7 views3 pages

MY CAROUSEL2

The document contains a React component called SmoothCarousel that implements a smooth image carousel using Framer Motion for animations. It manages the display of images through state management and allows users to navigate between images with buttons and drag functionality. The component also includes visual indicators for the current image being displayed.

Uploaded by

muhamad.shkeir
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
7 views3 pages

MY CAROUSEL2

The document contains a React component called SmoothCarousel that implements a smooth image carousel using Framer Motion for animations. It manages the display of images through state management and allows users to navigate between images with buttons and drag functionality. The component also includes visual indicators for the current image being displayed.

Uploaded by

muhamad.shkeir
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

import { useState } from 'react';

import { motion, AnimatePresence } from 'framer-motion';

const images = [
{
id: 1,
label: 'img 1',
url: 'https://hbslewdkkgwsaohjyzak.supabase.co/storage/v1/object/public/
newimges/ChatGPT%20Imagasy%205,%202025,%2004_08_30%20AM.webp'
},
{
id: 2,
label: 'img 2',
url: 'https://hbslewdkkgwsaohjyzak.supabase.co/storage/v1/object/public/
newimges/ChatGPT%20Image%20May%205,%202025,%2004_17_23%20AM.webp'
},
{
id: 3,
label: 'img 3',
url: 'https://hbslewdkkgwsaohjyzak.supabase.co/storage/v1/object/public/
newimges/ChatGPT%20Image%20May%205,%202025,%2004_17_23%20AM.webp'
},
{
id: 4,
label: 'img 4',
url: 'https://hbslewdkkgwsaohjyzak.supabase.co/storage/v1/object/public/
newimges/ChatGPT%20Imagasy%205,%202025,%2004_08_30%20AM.webp'
},
{
id: 5,
label: 'img 5',
url: 'https://hbslewdkkgwsaohjyzak.supabase.co/storage/v1/object/public/
newimges/ChatGPT%20Image%20May%205,%202025,%2004_17_23%20AM.webp'
},
];

export default function SmoothCarousel() {


const [index, setIndex] = useState(0);
const total = images.length;

const paginate = (direction: number) => {


setIndex((prev) => (prev + direction + total) % total);
};

const getDisplayItems = () => {


const prev = (index - 2 + total) % total;
const before = (index - 1 + total) % total;
const after = (index + 1) % total;
const next = (index + 2) % total;
return [prev, before, index, after, next];
};

return (
<div className="w-full flex flex-col items-center justify-center bg-gray-200 p-
8 relative min-h-[400px] select-none">
<div className="relative w-full max-w-6xl">
<button
onClick={() => paginate(-1)}
className="absolute left-0 top-1/2 transform -translate-y-1/2 z-10 text-
3xl font-bold px-4"
>
‹
</button>

<div className="flex items-center gap-4 relative overflow-visible w-full


px-20">
<div className="relative flex items-center justify-center w-full h-
[300px]">
<AnimatePresence initial={false}>
{getDisplayItems().map((i, pos) => (
<motion.div
key={images[i].id}
className="absolute rounded-xl border border-black overflow-
hidden shadow-md bg-white"
initial={{ opacity: 0, scale: 0.96, x: 0 }}
animate={{
opacity: 1,
scale: pos === 2 ? 1 : 0.94,
x: `${(pos - 2) * 180}px`
}}
exit={{ opacity: 0, scale: 0.96, x: 0 }}
transition={{
duration: 1.2,
ease: [0.33, 1, 0.68, 1] // ⬅️ butter smooth easing
}}
style={{
width: pos === 2 ? '240px' : '140px',
height: pos === 2 ? '300px' : '200px',
zIndex: pos === 2 ? 10 : 5,
pointerEvents: pos === 2 ? 'auto' : 'none',
userSelect: 'none',
WebkitUserDrag: 'none'
}}
drag="x"
dragConstraints={false} // ⬅️ allow natural drag movement
dragElastic={0.4} // ⬅️ allow smoother soft edge drag
onDragStart={(e) => e.preventDefault()}
onDragEnd={(e, info) => {
if (info.offset.x > 80) paginate(-1);
else if (info.offset.x < -80) paginate(1);
}}
>
<img
src={images[i].url}
alt={images[i].label}
className="object-cover w-full h-full pointer-events-none
select-none"
draggable={false}
/>
</motion.div>
))}
</AnimatePresence>
</div>
</div>

<button
onClick={() => paginate(1)}
className="absolute right-0 top-1/2 transform -translate-y-1/2 z-10 text-
3xl font-bold px-4"
>
›
</button>
</div>

<div className="flex gap-1 mt-6">


{images.map((_, i) => (
<div
key={i}
className={`w-2 h-2 rounded-full transition-all duration-300 ${i ===
index ? 'bg-black' : 'bg-gray-400'}`}
/>
))}
</div>
</div>
);
}

You might also like