Component

Image Slider

The Image Slider Component is a captivating and user-friendly way to display a series of images with engaging animations. Ideal for portfolios, galleries, or product showcases, this component combines smooth transitions with interactive navigation, creating a visually stunning experience for users.

Features

  • ▸Smooth Animations: Integrates dynamic transitions with effects like blur, scaling, rotation, and color changes using Framer Motion for a seamless visual experience.
  • ▸Automatic and Manual Navigation: Offers automatic slide transitions or manual navigation controls, giving users flexibility to explore the images at their own pace.
  • ▸Customizable Effects: Allows customization of transition styles and durations, enabling you to tailor the slider's appearance to match your website's aesthetic.
  • ▸Responsive Layout: Fully responsive and optimized for various screen sizes, ensuring a consistent user experience across desktops, tablets, and mobile devices.
  • ▸Engaging Interactivity: Enhances user engagement with hover effects, thumbnail navigation, or progress indicators for a modern and interactive design.
1
Effortless Image Sliding,
Seamless User Experience
Installation

01.Install Dependencies

npm install framer-motion
Source Code
'use client';
import { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'motion/react';

function Content(){
  return(
    <div className='text-7xl font-black bg-gradient-to-b bg-clip-text text-transparent text-center from-white to-gray-400 z-[2]'>
      Effortless Image Sliding,<br/> Seamless User Experience
    </div>
  )
};

export default function ImageSlider({images}) {
  const [currentIndex, setCurrentIndex] = useState(0);
 
  // Automatically change images every 4 seconds
  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length);
    }, 4000); // 4000ms = 4sec
    return () => clearInterval(interval);
  }, [images.length]);

  return (
    <div className="relative w-full h-screen flex items-center justify-center overflow-hidden">
      <AnimatePresence>
        <motion.img
          key={currentIndex}
          src={images[currentIndex]}
          alt={`Image ${currentIndex + 1}`}
          className="absolute w-full h-full object-cover"
          initial={{
            filter: "blur(10px) brightness(50%)",
            opacity: 0.75,
            rotateY: 90,
            scale: 0.5,
          }}
          animate={{
            filter: "blur(0px) brightness(80%)",
            opacity: 0.9,
            rotateY: 0,
            scale: 1,
          }}
          exit={{
            filter: "blur(10px) brightness(50%)",
            opacity: 0.75,
            rotateY: -45,
            scale: 0,
          }}
          transition={{
            duration: 0.75
          }}
        />
      </AnimatePresence>
      {/* Content to be displayed above Sliders */}
      <Content/>
    </div>
  );
}
sparkui