Slid Image Carousel

Description

This component is a smooth, visually rich left-to-right sliding image carousel enhanced with a fully customizable animated border made of stars, circles, triangles, glowing lights, or shining gold stars. Each image transitions using Framer Motion’s spring-based slide animation, creating a fluid, polished gallery experience suitable for hero sections, banners, or product showcases.

✨ Key Features

• Sliding Animation:Uses Framer Motion to animate images entering and exiting from left or right based on navigation direction.

• Animated Border:A unique perimeter animation where shapes continuously travel around the edge of the carousel.

  • Shapes include: Star, Circle, Triangle, Colorful Lights, Shining Gold Star

  • Adjustable color, size, and speed

  • Smooth looping animation using requestAnimationFrame

• Autoplay Support:Enables automatic slide transitions with customizable interval timing.

• Dot Navigation:Minimal dot indicators that match your theme, with adjustable inactive and active colors.

• Responsive Image Control:Uses Framer’s responsive image picker, supporting up to 10 images.

• Framer-Ready:Includes full Property Controls for seamless customization in the Framer editor.

🎛️ Customizable Controls

• Auto-play & interval

• Dot visibility & colors

• Shape type (star/circle/triangle/colorful/gold)

• Shape size & animation speed

• Border width