Skip to content

Instantly share code, notes, and snippets.

@Mif2006
Created October 9, 2023 19:34
Show Gist options
  • Save Mif2006/5ad7a061259c32b89daf8098f2830b95 to your computer and use it in GitHub Desktop.
Save Mif2006/5ad7a061259c32b89daf8098f2830b95 to your computer and use it in GitHub Desktop.
import { useState } from "react";
import { motion } from "framer-motion";
import city1 from "../assets/city1.png";
import city2 from "../assets/city2.png";
import city3 from "../assets/city3.png";
import planet1 from "../assets/planet1.png";
import planet2 from "../assets/planet2.png";
const ImageSlider = () => {
const [positionIndexes, setPositionIndexes] = useState([0, 1, 2, 3, 4]);
const handleNext = () => {
setPositionIndexes((prevIndexes) => {
const updatedIndexes = prevIndexes.map(
(prevIndex) => (prevIndex + 1) % 5
);
return updatedIndexes;
});
};
const handleBack = () => {
setPositionIndexes((prevIndexes) => {
const updatedIndexes = prevIndexes.map(
(prevIndex) => (prevIndex + 4) % 5
);
return updatedIndexes;
});
};
const images = [city1, city2, city3, planet1, planet2];
const positions = ["center", "left1", "left", "right", "right1"];
const imageVariants = {
center: { x: "0%", scale: 1, zIndex: 5 },
left1: { x: "-50%", scale: 0.7, zIndex: 3 },
left: { x: "-90%", scale: 0.5, zIndex: 2 },
right: { x: "90%", scale: 0.5, zIndex: 1 },
right1: { x: "50%", scale: 0.7, zIndex: 3 },
};
return (
<div className="flex items-center flex-col justify-center bg-black h-screen">
{images.map((image, index) => (
<motion.img
key={index}
src={image}
alt={image}
className="rounded-[12px]"
initial="center"
animate={positions[positionIndexes[index]]}
variants={imageVariants}
transition={{ duration: 0.5 }}
style={{ width: "40%", position: "absolute" }}
/>
))}
<div className="flex flex-row gap-3">
<button
className="text-white mt-[400px] bg-indigo-400 rounded-md py-2 px-4"
onClick={handleBack}
>
Back
</button>
<button
className="text-white mt-[400px] bg-indigo-400 rounded-md py-2 px-4"
onClick={handleNext}
>
Next
</button>
</div>
</div>
);
};
export default ImageSlider;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment