Component

Carousel

A flexible carousel component with animation modes, indicators, swipe support, autoplay, and optional controls.

<div class="quanta-carousel carousel-animate-slide" data-autoplay="3000" data-autoplay-enabled="true" data-indicator-type="circle" data-controls="true">
  <div class="quanta-carousel-track">
    <div class="quanta-carousel-item active">
      <img src="/images/slide1.jpg" alt="Slide 1" />
    </div>
    <div class="quanta-carousel-item">
      <img src="/images/slide2.jpg" alt="Slide 2" />
    </div>
    <div class="quanta-carousel-item">
      <img src="/images/slide3.jpg" alt="Slide 3" />
    </div>
  </div>

  <button class="quanta-carousel-prev"></button>
  <button class="quanta-carousel-next"></button>
  <div class="quanta-carousel-indicators"></div>
</div>

Animations

Choose between slide, fade, or grow animations using class:

<div class="quanta-carousel carousel-animate-fade">...</div>
<div class="quanta-carousel carousel-animate-grow">...</div>

Indicator Types

Available: circle, square, rect, img. Use data-indicator-type:

<div class="quanta-carousel" data-indicator-type="square">...</div>

Controls

Toggle navigation buttons using data-controls="false".

<div class="quanta-carousel" data-controls="false">...</div>

Autoplay

Set data-autoplay-enabled="true" and specify interval in ms with data-autoplay="5000".

<div class="quanta-carousel" data-autoplay-enabled="true" data-autoplay="4000">...</div>

Swipe Support

Mobile swipe gestures are built-in and work by default. Just touch and drag.