Get started with embla-carousel CDN

MIT licensed

Embla Carousel is a lightweight, accessible, and customizable JS carousel library.

Tags:
  • slider
  • carousel
  • lightweight
  • touch

Stable version

Copied!

How to start using embla-carousel CDN


<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
  <script src="https://cdn.jsdelivr.net/npm/embla-carousel@8.0.0/umd/embla-carousel.min.js"></script>
  <script src="scripts.js"></script>
</head>
<body>
  <div class="carousel">
    <button class="prev">Previous</button>
    <button class="next">Next</button>
    <div class="embla">
      <div class="embla__viewport">
        <div class="embla__container">
          <div class="embla__slide">Slide 1</div>
          <div class="embla__slide">Slide 2</div>
          <div class="embla__slide">Slide 3</div>
        </div>
      </div>
    </div>
  </div>
  <script>
    import { EmblaCarousel } from 'embla-carousel';

    const carousel = new EmblaCarousel(document.querySelector('.embla'), {
      loop: true,
      prevBtn: document.querySelector('.prev'),
      nextBtn: document.querySelector('.next'),
    });

    carousel.on('select', () => {
      console.log(`Selected slide: ${carousel.selectedIndex + 1}`);
    });
  </script>
</body>
</html>

All versions