跳转到主要内容 跳转到导航 跳转到搜索 跳转到页脚

🎠 Carousels & Sliders

Image carousels, content sliders, and interactive navigation components

🎭 Component Demonstrations

🛍️ Product Carousel

🌟 Hero Banner Carousel

💬 Testimonial Slider

📜 Scroll Carousel (CSS Native)

🖼️ Thumbnail Gallery Carousel

Product Gallery

High-quality product images showing different angles and details.

⬆️ Vertical Carousel

♾️ Infinite Loop Carousel

⚙️ Interactive Configuration

Configuration

📝 Usage Examples

<div x-data="sparklesCarousel({ items: 3, autoplay: true })">
  <div class="sparkles-carousel-track">...</div>
</div>
<div class="sparkles-carousel-container">
  <button @click="previousSlide()" class="sparkles-carousel-btn-prev"></button>
  <button @click="nextSlide()" class="sparkles-carousel-btn-next"></button>
</div>
<div x-data="{ infinite: true, touch: true }"
  class="sparkles-carousel-responsive">
  ...content slides...
</div>

⚡ Performance & Accessibility

Carousel Best Practices

  • 🎯 ARIA labels and keyboard navigation support for screen readers
  • Lazy loading for images and smooth CSS transform animations
  • 🔧 Hardware acceleration with translateX for 60fps performance
  • 📱 Touch gesture support and responsive breakpoint optimization