Embla Carousel React

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

« View Demo »

Table of contents

• Demo
• Implementations
• Installation
• Usage
• Props
• License

Demo

Try it 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.selectedScrollSnap()}`,
      )
    })
  }

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

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

  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.prev()}>Previous</button>
        <button onClick={() => this.next()}>Next</button>
      </>
    )
  }
}

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.

License

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