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

The React version of Embla Carousel.

 Installation 

 API Reference 

 Examples 

Open Source

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

· · ·

Thanks BrowserStack.