Convert Figma logo to code with AI

davidjerleke logoembla-carousel

A lightweight carousel library with fluid motion and great swipe precision.

5,823
176
5,823
7

Top Related Projects

39,523

Most modern mobile touch slider with hardware accelerated transitions

7,271

A dependency-free JavaScript ES6 slider and carousel. It’s lightweight, flexible and fast. Designed to slide. No less, no more

28,370

the last carousel you'll ever need

4,828

Splide is a lightweight, flexible and accessible slider/carousel written in TypeScript. No dependencies, no Lighthouse errors.

:leaves: Touch, responsive, flickable carousels

3,481

Siema - Lightweight and simple carousel in pure JavaScript

Quick Overview

Embla Carousel is a lightweight and flexible JavaScript carousel library. It provides a customizable and extensible solution for creating responsive and touch-friendly carousels with minimal dependencies.

Pros

  • Lightweight and performant, with a small bundle size
  • Highly customizable with a wide range of options and plugins
  • Supports touch gestures and is mobile-friendly
  • Offers smooth animations and transitions

Cons

  • Limited built-in styling options, requiring more custom CSS
  • May have a steeper learning curve for complex implementations
  • Documentation could be more comprehensive for advanced use cases

Code Examples

  1. Basic carousel setup:
import EmblaCarousel from 'embla-carousel'

const emblaNode = document.querySelector('.embla')
const options = { loop: false, align: 'center' }
const embla = EmblaCarousel(emblaNode, options)
  1. Using plugins:
import EmblaCarousel from 'embla-carousel'
import Autoplay from 'embla-carousel-autoplay'

const emblaNode = document.querySelector('.embla')
const options = { loop: true }
const plugins = [Autoplay({ delay: 4000, stopOnInteraction: false })]

const embla = EmblaCarousel(emblaNode, options, plugins)
  1. Accessing carousel methods:
const embla = EmblaCarousel(emblaNode, options)

embla.scrollNext()
embla.scrollPrev()
embla.scrollTo(2)

Getting Started

  1. Install Embla Carousel:
npm install embla-carousel
  1. Import and initialize the carousel:
import EmblaCarousel from 'embla-carousel'

const emblaNode = document.querySelector('.embla')
const viewportNode = emblaNode.querySelector('.embla__viewport')
const options = { loop: true }
const embla = EmblaCarousel(viewportNode, options)
  1. Add basic HTML structure:
<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>
  1. Add minimal CSS:
.embla__viewport {
  overflow: hidden;
}
.embla__container {
  display: flex;
}
.embla__slide {
  flex: 0 0 100%;
  min-width: 0;
}

Competitor Comparisons

39,523

Most modern mobile touch slider with hardware accelerated transitions

Pros of Swiper

  • More feature-rich with built-in pagination, navigation, and effects
  • Extensive documentation and large community support
  • Supports multiple frameworks (React, Vue, Angular, etc.)

Cons of Swiper

  • Larger file size due to more features, potentially impacting performance
  • Steeper learning curve for basic implementations
  • More complex configuration options may be overwhelming for simple use cases

Code Comparison

Embla Carousel:

import EmblaCarousel from 'embla-carousel'

const embla = EmblaCarousel(document.querySelector('.embla'), { loop: true })

Swiper:

import Swiper from 'swiper'

const swiper = new Swiper('.swiper-container', {
  loop: true,
  pagination: { el: '.swiper-pagination' },
  navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' }
})

Summary

Swiper offers a more comprehensive set of features and wider framework support, making it suitable for complex projects. However, this comes at the cost of a larger file size and potentially more complex setup. Embla Carousel, on the other hand, provides a simpler, more lightweight solution that may be preferable for basic carousel needs or performance-critical applications. The choice between the two depends on the specific requirements of your project and the level of customization needed.

7,271

A dependency-free JavaScript ES6 slider and carousel. It’s lightweight, flexible and fast. Designed to slide. No less, no more

Pros of Glide

  • Lightweight and dependency-free, with a smaller bundle size
  • Extensive API and event system for advanced customization
  • Better browser support, including older versions of Internet Explorer

Cons of Glide

  • Less performant for complex, touch-based interactions
  • Fewer built-in features for responsive design and breakpoints
  • Limited support for vertical carousels and complex layouts

Code Comparison

Glide initialization:

new Glide('.glide').mount()

Embla Carousel initialization:

const emblaNode = document.querySelector('.embla')
const embla = EmblaCarousel(emblaNode, { loop: false })

Both libraries offer simple initialization, but Embla Carousel requires an additional step to select the container element.

Key Differences

  • Embla Carousel focuses on performance and smooth animations, especially for touch devices
  • Glide provides a more traditional carousel experience with a wider range of options
  • Embla Carousel has better TypeScript support and documentation
  • Glide offers more built-in navigation controls and pagination options

Overall, Embla Carousel is better suited for modern, performance-focused projects, while Glide excels in flexibility and broader browser support.

28,370

the last carousel you'll ever need

Pros of Slick

  • Extensive customization options and settings
  • Wide browser compatibility, including older versions
  • Large community and ecosystem with numerous plugins

Cons of Slick

  • Relies on jQuery, which may increase bundle size and affect performance
  • Less modern codebase, with potential maintenance issues
  • Limited support for touch devices and mobile-specific features

Code Comparison

Slick initialization:

$('.carousel').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 2000,
});

Embla Carousel initialization:

import EmblaCarousel from 'embla-carousel'

const embla = EmblaCarousel(document.querySelector('.embla'), {
  slidesToScroll: 1,
  align: 'center'
})

Key Differences

  • Embla Carousel is a modern, lightweight alternative to Slick
  • Embla focuses on performance and smooth animations, especially on mobile devices
  • Slick offers more built-in features and options out of the box
  • Embla has a smaller footprint and doesn't require jQuery
  • Slick has a larger community and more readily available resources

Both carousels have their strengths, with Slick being more established and feature-rich, while Embla Carousel offers a modern, performant alternative for developers looking to optimize their projects.

4,828

Splide is a lightweight, flexible and accessible slider/carousel written in TypeScript. No dependencies, no Lighthouse errors.

Pros of Splide

  • More extensive documentation and examples
  • Built-in TypeScript support
  • Wider range of pre-built components and extensions

Cons of Splide

  • Larger bundle size
  • Less flexible for custom implementations
  • More opinionated API structure

Code Comparison

Embla Carousel:

const emblaNode = document.querySelector('.embla')
const options = { loop: true }
const emblaApi = EmblaCarousel(emblaNode, options)

Splide:

const splide = new Splide('.splide', {
  type: 'loop',
  perPage: 3,
  perMove: 1,
})
splide.mount()

Both libraries offer simple initialization, but Splide provides more configuration options out of the box. Embla Carousel focuses on a minimal API, allowing for more customization through plugins and extensions.

Splide offers a more comprehensive set of features and pre-built components, making it easier to implement complex carousels quickly. However, this comes at the cost of a larger bundle size and potentially less flexibility for highly custom implementations.

Embla Carousel, on the other hand, provides a lightweight core with a plugin system, allowing developers to add only the features they need. This results in a smaller bundle size and more flexibility, but may require more work for advanced functionality.

:leaves: Touch, responsive, flickable carousels

Pros of Flickity

  • More extensive documentation and examples
  • Wider browser support, including older versions
  • Built-in support for touch gestures and dragging

Cons of Flickity

  • Larger file size, potentially impacting page load times
  • Less flexible for custom animations and transitions
  • Commercial license required for some use cases

Code Comparison

Embla Carousel:

import EmblaCarousel from 'embla-carousel'

const embla = EmblaCarousel(document.querySelector('.embla'), {
  loop: true,
  align: 'center'
})

Flickity:

import Flickity from 'flickity'

const flkty = new Flickity('.carousel', {
  wrapAround: true,
  cellAlign: 'center'
})

Both libraries offer similar basic functionality, but Embla Carousel's API is generally more modern and flexible. Flickity provides more out-of-the-box features, while Embla Carousel focuses on performance and customizability.

Embla Carousel is lightweight and offers better performance, especially for mobile devices. It also provides more control over animations and transitions. However, it may require more setup for advanced features.

Flickity has a larger community and more third-party plugins available. It's easier to set up for common use cases but may be overkill for simpler projects or performance-critical applications.

Choose Embla Carousel for better performance and customization, or Flickity for ease of use and extensive features out of the box.

3,481

Siema - Lightweight and simple carousel in pure JavaScript

Pros of Siema

  • Lightweight and minimalistic, with a smaller file size
  • Simple API and easy to set up quickly
  • No dependencies, pure JavaScript implementation

Cons of Siema

  • Limited built-in features compared to Embla Carousel
  • Less active development and maintenance
  • Fewer options for customization and advanced functionality

Code Comparison

Siema initialization:

const mySiema = new Siema({
  selector: '.siema',
  duration: 200,
  easing: 'ease-out',
  perPage: 1,
  startIndex: 0,
  draggable: true,
  multipleDrag: true,
  threshold: 20,
  loop: false,
  rtl: false,
});

Embla Carousel initialization:

const emblaNode = document.querySelector('.embla')
const options = { loop: false, align: 'center' }
const embla = EmblaCarousel(emblaNode, options)

Siema offers a more concise initialization with various options directly in the constructor, while Embla Carousel separates the options object and provides a more modular approach. Embla Carousel generally offers more advanced features and customization options, making it suitable for complex carousel implementations, while Siema excels in simplicity and ease of use for basic carousel needs.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README


Embla Carousel

Embla Carousel

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.


 Examples 

 Generator 

 Installation 




Special Thanks

gunnarx2 - React wrapper useEmblaCarousel.
LiamMartens - Solid wrapper createEmblaCarousel.
donaldxdonald, zip-fa, JeanMeche - Angular wrapper EmblaCarouselDirective.
xiel - Plugin Embla Carousel Wheel Gestures.
zaaakher - Contributing guidelines.
sarussss - Answering questions.


Open Source

Embla is MIT licensed 💖.

Embla Carousel - Copyright © 2019-present.
Package created by David Jerleke.

· · ·

Thanks BrowserStack.

NPM DownloadsLast 30 Days