Multi Carousel Demo

Basic Usage

Navigate with arrows, dots, or keyboard (focus then use arrow keys).

Slide 1

Slide 2

Slide 3

Slide 4

Current: Slide 1

<multi-carousel>
  <div class="slide slide-1">Slide 1</div>
  <div class="slide slide-2">Slide 2</div>
  <div class="slide slide-3">Slide 3</div>
  <div class="slide slide-4">Slide 4</div>
</multi-carousel>

<script type="module">
  import '@manufosela/multi-carousel';

  const carousel = document.querySelector('multi-carousel');
  carousel.addEventListener('slide-change', (e) => {
    console.log(`Slide ${e.detail.index + 1} of ${e.detail.total}`);
  });
</script>

Image Gallery

Using free images from Picsum Photos.

<multi-carousel style="--carousel-height: 300px;">
  <img src="https://picsum.photos/seed/demo1/800/300" alt="Image 1">
  <img src="https://picsum.photos/seed/demo2/800/300" alt="Image 2">
  <img src="https://picsum.photos/seed/demo3/800/300" alt="Image 3">
  <img src="https://picsum.photos/seed/demo4/800/300" alt="Image 4">
</multi-carousel>

No Loop

Stops at first/last slide instead of looping.

First

Middle

Last

<multi-carousel no-loop>
  <div class="slide slide-1">First</div>
  <div class="slide slide-2">Middle</div>
  <div class="slide slide-3">Last</div>
</multi-carousel>

Autoplay

Auto-advances every 3 seconds.

Auto 1

Auto 2

Auto 3

<multi-carousel autoplay="3000">
  <div class="slide slide-1">Auto 1</div>
  <div class="slide slide-2">Auto 2</div>
  <div class="slide slide-3">Auto 3</div>
</multi-carousel>

Arrows Only

Hide navigation dots.

Arrows

Only

Mode

<multi-carousel hide-nav>
  <div class="slide slide-1">Arrows</div>
  <div class="slide slide-2">Only</div>
  <div class="slide slide-3">Mode</div>
</multi-carousel>

Dots Only

Hide arrow buttons.

Dots

Only

Mode

<multi-carousel hide-arrows>
  <div class="slide slide-1">Dots</div>
  <div class="slide slide-2">Only</div>
  <div class="slide slide-3">Mode</div>
</multi-carousel>

Custom Styling

Use CSS variables for theming.

Styled 1

Styled 2

Styled 3

<multi-carousel style="
  --carousel-height: 200px;
  --carousel-bg: #1e293b;
  --carousel-nav-active: #ec4899;
  --carousel-arrow-bg: rgba(30,41,59,0.8);
  --carousel-arrow-color: white;
">
  <div class="slide slide-4">Styled 1</div>
  <div class="slide slide-1">Styled 2</div>
  <div class="slide slide-2">Styled 3</div>
</multi-carousel>

Synced Carousels

Multiple carousels that stay in sync.

Master 1

Master 2

Master 3

Synced 1

Synced 2

Synced 3

<multi-carousel id="syncMaster" master style="--carousel-height: 200px;">
  <div class="slide slide-1">Master 1</div>
  <div class="slide slide-2">Master 2</div>
  <div class="slide slide-3">Master 3</div>
</multi-carousel>

<multi-carousel master-id="syncMaster" style="--carousel-height: 150px;">
  <div class="slide slide-3">Synced 1</div>
  <div class="slide slide-1">Synced 2</div>
  <div class="slide slide-2">Synced 3</div>
</multi-carousel>