Embla Carousel – The most fluid carousel library with unmatched swipe precision

https://davidcetinkaya.github.io/embla-carousel/

Introduction

embla-carousel is a bare bones carousel library with great fluid motion and awesome swipe precision. It's library agnostic, dependency free and 100% open source. Build awesome carousels by extending Embla Carousel with your own CSS and JavaScript. It works in all modern browsers including IE 11.

Installation

embla-carousel can easily be installed in every JavaScript or TypeScript project built for the web, either using a package manager or a CDN.

Module usage


npm install embla-carousel --save


import EmblaCarousel from 'embla-carousel'
const emblaNode = document.getElementById('embla')

const embla = EmblaCarousel(emblaNode)

The HTML


<div class="embla" id="embla">
  <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>

The CSS


.embla {
  overflow: hidden;
}
.embla__container {
  display: flex;
}
.embla__slide {
  position: relative;
  min-width: 100%;
}

React usage


import React, { useEffect } from 'react'
import { useEmblaCarousel } from 'embla-carousel/react'

const EmblaCarousel = () => {
  const [EmblaCarouselReact, embla] = useEmblaCarousel({ loop: false })

  useEffect(() => {
    if (embla) {
      // Embla API is ready
    }
  }, [embla])

  return (
    <EmblaCarouselReact>
      <div className="embla__container">
        <div className="embla__slide">Slide 1</div>
        <div className="embla__slide">Slide 2</div>
        <div className="embla__slide">Slide 3</div>
      </div>
    </EmblaCarouselReact>
  )
}

export default EmblaCarousel

CDN as an alternative


<html>
  <head>
    <style>
      .embla {
        overflow: hidden;
      }
      .embla__container {
        display: flex;
      }
      .embla__slide {
        position: relative;
        min-width: 100%;
      }
    </style>
  </head>
  <body>
    <div class="embla" id="embla">
      <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>
    <script src="https://unpkg.com/embla-carousel@latest/embla-carousel.umd.js"></script>
    <script>
      var emblaNode = document.getElementById("embla");
      var embla = EmblaCarousel(emblaNode);
    </script>
  </body>
</html>