Advanced Examples

Custom Timing

Slower interval with a fast transition:

• 1
• 2
• 3
• 4
• 5
• 6

ContinuousCarousel('myCarousel', {
  interval: 4000,
  transitionDuration: 500
});

Callbacks

Hook into carousel events:

const carousel = ContinuousCarousel('myCarousel', {
  onSlideChange: (index) => {
    console.log('Slide changed to:', index);
    document.getElementById('counter').textContent = `Slide ${index}`;
  },
  onPause: () => console.log('Paused'),
  onPlay: () => console.log('Playing'),
  onDestroy: () => console.log('Destroyed')
});

Programmatic Control

Use the API to control playback:

const carousel = ContinuousCarousel('myCarousel', {
  autoplay: false
});

document.getElementById('playBtn').addEventListener('click', () => {
  carousel.play();
});

document.getElementById('pauseBtn').addEventListener('click', () => {
  carousel.pause();
});

document.getElementById('destroyBtn').addEventListener('click', () => {
  carousel.destroy();
});

Dynamic Configuration

Update settings on a running carousel:

const carousel = ContinuousCarousel('myCarousel', {
  interval: 2000
});

// Speed up
carousel.updateConfig({ interval: 500 });

// Slow down
carousel.updateConfig({ interval: 5000 });

Keyboard Navigation

Tab to the carousel and use arrow keys to advance slides. Press Space or Enter to toggle pause.

• 1
• 2
• 3
• 4
• 5
• 6

ContinuousCarousel('myCarousel', {
  keyboardNav: true // enabled by default
});

TIP

Click the carousel above, then use Arrow Right to advance or Space to pause.

Image Gallery

<div id="gallery" class="c-carousel-container" data-direction="horizontal" data-num-visible="1">
  <ul class="c-carousel-group">
    <li class="c-carousel-item">
      <img src="image1.jpg" alt="Image 1">
    </li>
    <li class="c-carousel-item">
      <img src="image2.jpg" alt="Image 2">
    </li>
    <li class="c-carousel-item">
      <img src="image3.jpg" alt="Image 3">
    </li>
  </ul>
</div>

ContinuousCarousel('gallery', {
  interval: 5000,
  pauseOnHover: true
});