Hanzo AI Studio

This is a live session on zen5. Change the model in the sidebar and ask the same thing again to compare.

Sure! Here's a simple React carousel component using Framer Motion:

jsx
import { motion, AnimatePresence } from 'framer-motion';
import { useState } from 'react';

const Carousel = ({ images }) => {
  const [currentIndex, setCurrentIndex] = useState(0);

  const handleNext = () => {
    setCurrentIndex((prevIndex) => 
      prevIndex === images.length - 1 ? 0 : prevIndex + 1
    );
  };

  const handlePrevious = () => {
    setCurrentIndex((prevIndex) => 
      prevIndex === 0 ? images.length - 1 : prevIndex - 1
    );
  };

  return (
    

      

        Previous
        Next
      
      
        
      
    
  );
};

export default Carousel;

This component takes an array of image URLs and displays them one at a time with animated transitions. You can customize it further based on your specific needs.