hcg-carousel Demo

Lightweight vanilla JavaScript carousel with touch swipe, autoplay, arrows, dots, and keyboard support. Version - zero dependencies. hcg-carousel - full documentation

1. Basic carousel

Default options: loop, arrows, dots, and swipe enabled.

Try it
Show code 
<div id="carousel-basic" class="hcg-carousel">
  <div class="hcg-carousel-viewport">
    <div class="hcg-carousel-track">
      <div>Slide 1</div>
      <div>Slide 2</div>
      <div>Slide 3</div>
    </div>
  </div>
</div>

HcgCarousel('#carousel-basic');

2. Autoplay

Autoplay every 2.5 seconds. Pauses on hover.

Try it
Show code 
<div id="carousel-autoplay" class="hcg-carousel">
  <div class="hcg-carousel-viewport">
    <div class="hcg-carousel-track">
      <div>Autoplay A</div>
      <div>Autoplay B</div>
      <div>Autoplay C</div>
    </div>
  </div>
</div>

const carousel = HcgCarousel('#carousel-autoplay', {
  autoplay: 2500,
  pauseOnHover: true,
});

3. Multiple slides visible

Show three cards at once with a 16px gap.

Try it
Show code 
<div id="carousel-multi" class="hcg-carousel">
  <div class="hcg-carousel-viewport">
    <div class="hcg-carousel-track">
      <div><div class="demo-card"><h3>Plan</h3><p>Starter tier.</p></div></div>
      <div><div class="demo-card"><h3>Grow</h3><p>More seats.</p></div></div>
      <div><div class="demo-card"><h3>Scale</h3><p>Priority support.</p></div></div>
      <div><div class="demo-card"><h3>Enterprise</h3><p>Custom SLAs.</p></div></div>
      <div><div class="demo-card"><h3>Custom</h3><p>Talk to sales.</p></div></div>
    </div>
  </div>
</div>

HcgCarousel('#carousel-multi', {
  slidesToShow: 3,
  gap: 16,
  loop: false,
});

4. No loop

Arrows disable at the first and last slide.

Try it
Show code 
<div id="carousel-linear" class="hcg-carousel">
  <div class="hcg-carousel-viewport">
    <div class="hcg-carousel-track">
      <div>First</div>
      <div>Middle</div>
      <div>Last</div>
    </div>
  </div>
</div>

HcgCarousel('#carousel-linear', { loop: false });

5. API controls

Call goTo(), play(), and pause() on the instance.

Try it

Current slide: 1

Show code 
<p id="api-status">Current slide: 1</p>
<div id="carousel-api" class="hcg-carousel">
  <div class="hcg-carousel-viewport">
    <div class="hcg-carousel-track">
      <div>API 1</div>
      <div>API 2</div>
      <div>API 3</div>
      <div>API 4</div>
    </div>
  </div>
</div>
<button type="button" id="api-goto-0">Go to 1</button>
<button type="button" id="api-goto-2">Go to 3</button>
<button type="button" id="api-play">Play</button>
<button type="button" id="api-pause">Pause</button>

const apiStatus = document.getElementById('api-status');
const carousel = HcgCarousel('#carousel-api', {
  autoplay: 3000,
  onChange: ({ index }) => {
    apiStatus.textContent = `Current slide: ${index + 1}`;
  },
});

document.getElementById('api-goto-0').addEventListener('click', () => carousel.goTo(0));
document.getElementById('api-goto-2').addEventListener('click', () => carousel.goTo(2));
document.getElementById('api-play').addEventListener('click', () => carousel.play());
document.getElementById('api-pause').addEventListener('click', () => carousel.pause());

6. Slides to scroll

Advance three slides at a time with slidesToScroll when showing multiple cards.

Try it
Show code 
<div id="carousel-scroll" class="hcg-carousel">
  <div class="hcg-carousel-viewport">
    <div class="hcg-carousel-track">
      <div><div class="demo-card"><h3>One</h3></div></div>
      <div><div class="demo-card"><h3>Two</h3></div></div>
      <div><div class="demo-card"><h3>Three</h3></div></div>
      <div><div class="demo-card"><h3>Four</h3></div></div>
      <div><div class="demo-card"><h3>Five</h3></div></div>
      <div><div class="demo-card"><h3>Six</h3></div></div>
    </div>
  </div>
</div>

HcgCarousel('#carousel-scroll', {
  slidesToShow: 3,
  slidesToScroll: 3,
  gap: 16,
  loop: false,
});
JavaScript Library

hcg-carousel - MIT License - HTML Code Generator