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:

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 (
    <div style={{ position: 'relative', overflow: 'hidden' }}>
      <div style={{ display: 'grid', gridAutoFlow: 'column', justifyContent: 'space-between', position: 'absolute', insetInline: 0, top: '50%', zIndex: 10 }}>
        <button onClick={handlePrevious}>Previous</button>
        <button onClick={handleNext}>Next</button>
      </div>
      <AnimatePresence mode="wait">
        <motion.img
          key={currentIndex}
          src={images[currentIndex]}
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          transition={{ duration: 0.5 }}
          style={{ width: '100%', height: 256, objectFit: 'cover' }}
        />
      </AnimatePresence>
    </div>
  );
};

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.