Get started with embla-carousel CDN

MIT licensed

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

  • slider
  • carousel
  • lightweight
  • touch

Stable version


How to start using embla-carousel CDN

<!DOCTYPE html>
  <link rel="stylesheet" href="styles.css">
  <script src=""></script>
  <script src="scripts.js"></script>
  <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>
    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}`);

All versions