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 tiny React.js wrapper for Embla Carousel. Please visit the vanilla JavaScript package on Github for documentation, available API methods and customizable options.

 TRY DEMO 

usage   ·   props   ·   codesandbox

 

Installation

NPM

npm install embla-carousel-react

Usage

React Hooks

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

const EmblaCarouselComponent = () => {
  const [embla, setEmbla] = useState(null)
  const scrollPrev = useCallback(() => embla.scrollPrev(), [embla])
  const scrollNext = useCallback(() => embla.scrollNext(), [embla])

  useEffect(() => {
    if (embla) {
      embla.on('select', () => {
        console.log(`Current index is ${embla.selectedScrollSnap()}`)
      })
    }
  }, [embla])

  return (
    <>
      <EmblaCarouselReact
        htmlTagName="div"
        emblaRef={setEmbla}
        options={{ loop: false }}
      >
        <div style={{ display: 'flex' }}>
          <div style={{ flex: '0 0 100%' }}>Slide 1</div>
          <div style={{ flex: '0 0 100%' }}>Slide 2</div>
          <div style={{ flex: '0 0 100%' }}>Slide 3</div>
        </div>
      </EmblaCarouselReact>
      <button onClick={scrollPrev}>Previous</button>
      <button onClick={scrollNext}>Next</button>
    </>
  )
}

export default EmblaCarouselComponent

React Class

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

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

  scrollNext() {
    this.embla.scrollNext()
  }

  scrollPrev() {
    this.embla.scrollPrev()
  }

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

export default EmblaCarouselComponent

Props

• htmlTagName - Any valid HTML tag like div or ul etc.
• className - Applied to top the top level wrapper.
• emblaRef - Like a ref function to access the Embla instance in parent component.
• options - Same options as the vanilla JS Embla package.

CodeSandbox

• Basic Setup - With Previous, Next & Dot buttons.
• Autoplay - With adjustable delay. Uses react hooks with a custom useInterval hook.

Open Source

^{Copyright © 2019-present, David Cetinkaya.}
Embla is MIT licensed 💖