Skip to content

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

License

Notifications You must be signed in to change notification settings

codinronan/embla-carousel-react

Repository files navigation


Embla Carousel React

Embla Carousel React

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

« View Demo »

Table of contents

Demo

Try it on the Demo Page or CodeSandbox ✨.

Implementations

Embla Carousel JavaScript     Embla Carousel React

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.

About

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

Resources

License

Stars

Watchers

Forks

Packages

No packages published