Hero Carousel Demo
✨ Features Demonstrated
- ✅ Multiple image slides in a carousel
- ✅ Auto-play every 4 seconds
- ✅ Navigation arrows (left/right)
- ✅ Indicator dots at the bottom
- ✅ Smooth fade transitions
- ✅ Responsive design
- ✅ Description overlays on each slide
- ✅ Shop Now button
🎮 How to Use
- Auto-play: The carousel automatically advances every 4 seconds
- Navigation Arrows: Click the left/right arrows to manually navigate
- Indicator Dots: Click any dot to jump to that specific slide
- Pause: Manual navigation resets the auto-play timer
📝 Current Configuration
Total Slides: 5
Auto-play Interval: 4 seconds
Slide Types: Images with descriptions
Button Link: /products
💻 Code Example
<HeroSection
:slides="[
{
type: 'image',
src: 'images/home/hero-image-1.jpg',
description: 'Discover our exquisite jewelry collection'
},
{
type: 'image',
src: 'images/home/hero-image-2.jpg',
description: 'Handcrafted with passion and precision'
},
{
type: 'image',
src: 'images/home/hero-image-3.jpg',
description: 'Timeless elegance for every occasion'
},
{
type: 'image',
src: 'images/home/hero-image-4.jpg',
description: 'Your story, beautifully told'
}
]"
button-link="/products"
:autoplay-interval="4000"
/>