embla-carousel-react

What is embla-carousel-react?

The embla-carousel-react package is a lightweight and customizable carousel library for React. It provides a performant and flexible way to create carousels and sliders in React applications.

What are embla-carousel-react's main functionalities?

Basic Carousel

This code demonstrates how to create a basic carousel using embla-carousel-react. It initializes the carousel with default options and includes three slides.

import React from 'react';
import { EmblaCarouselReact } from 'embla-carousel-react';

const BasicCarousel = () => {
  const options = {};
  return (
    <EmblaCarouselReact options={options}>
      <div className="embla__slide">Slide 1</div>
      <div className="embla__slide">Slide 2</div>
      <div className="embla__slide">Slide 3</div>
    </EmblaCarouselReact>
  );
};

export default BasicCarousel;

Autoplay

This code demonstrates how to implement an autoplay feature in the carousel. The carousel will automatically scroll to the next slide every 3 seconds.

import React, { useEffect } from 'react';
import { EmblaCarouselReact } from 'embla-carousel-react';

const AutoplayCarousel = () => {
  const options = { loop: true };
  let embla;

  useEffect(() => {
    if (embla) {
      const autoplay = setInterval(() => {
        embla.scrollNext();
      }, 3000);
      return () => clearInterval(autoplay);
    }
  }, [embla]);

  return (
    <EmblaCarouselReact options={options} emblaRef={(e) => (embla = e)}>
      <div className="embla__slide">Slide 1</div>
      <div className="embla__slide">Slide 2</div>
      <div className="embla__slide">Slide 3</div>
    </EmblaCarouselReact>
  );
};

export default AutoplayCarousel;

Custom Navigation

This code demonstrates how to add custom navigation buttons to the carousel. The buttons allow users to manually scroll to the previous or next slide.

import React, { useRef } from 'react';
import { EmblaCarouselReact } from 'embla-carousel-react';

const CustomNavigationCarousel = () => {
  const emblaRef = useRef(null);

  const scrollPrev = () => emblaRef.current.scrollPrev();
  const scrollNext = () => emblaRef.current.scrollNext();

  return (
    <div>
      <EmblaCarouselReact emblaRef={emblaRef}>
        <div className="embla__slide">Slide 1</div>
        <div className="embla__slide">Slide 2</div>
        <div className="embla__slide">Slide 3</div>
      </EmblaCarouselReact>
      <button onClick={scrollPrev}>Previous</button>
      <button onClick={scrollNext}>Next</button>
    </div>
  );
};

export default CustomNavigationCarousel;

Other packages similar to embla-carousel-react

react-slick

react-slick is a popular carousel component for React. It is built on top of the slick-carousel library and offers a wide range of features including autoplay, lazy loading, and custom navigation. Compared to embla-carousel-react, react-slick is more feature-rich but also heavier in terms of bundle size.

swiper

swiper is a modern and flexible slider library that supports both React and other frameworks. It offers a wide range of features such as virtual slides, parallax effects, and responsive breakpoints. Swiper is more versatile and feature-rich compared to embla-carousel-react, but it may be overkill for simpler use cases.

react-multi-carousel

react-multi-carousel is a responsive carousel component for React that supports multiple items per slide. It offers features like infinite scrolling, custom animations, and server-side rendering support. Compared to embla-carousel-react, react-multi-carousel is more focused on multi-item carousels and provides more out-of-the-box functionality for such use cases.

README

Embla Carousel React

A React.js component for Embla Carousel, written in TypeScript.

« View Demo »

Table of contents

• Demo
• Implementations
• Installation
• Usage
• License

Demo

Try it here on the Demo Page or CodeSandbox ✨.

Implementations

   

Installation

yarn add embla-carousel-react

import EmblaCarouselReact from 'embla-carousel-react'

Usage

class EmblaCarouselComponent extends Component {
  componentDidMount() {
    this.embla.on('select', () => {
      console.log(`Current index is ${this.embla.selectedIndex()}`)
    })
  }

  next() {
    this.embla.next()
  }

  previous() {
    this.embla.previous()
  }

  render() {
    return (
      <>
        <EmblaCarouselReact
          htmlTagName="div"
          emblaRef={c => (this.embla = c)}
          options={{ loop: false }}
        >
          <div style={{ display: 'flex', willChange: 'transform' }}>
            <div style={{ flex: '0 0 auto', width: '100%' }}>
              Slide 1
            </div>
            <div style={{ flex: '0 0 auto', width: '100%' }}>
              Slide 2
            </div>
            <div style={{ flex: '0 0 auto', width: '100%' }}>
              Slide 3
            </div>
          </div>
        </EmblaCarouselReact>
        <button onClick={() => this.previous()}>Previous</button>
        <button onClick={() => this.next()}>Next</button>
      </>
    )
  }
}

License

Embla is MIT licensed. Copyright © 2019-present, David Cetinkaya.