JSPM – embla-carousel-react@1.2.16

Package Exports

embla-carousel-react

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (embla-carousel-react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

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, useEffect } from 'react'
import EmblaCarouselReact from 'embla-carousel-react'

const EmblaCarouselComponent = () => {
  const [embla, setEmbla] = useState(null)

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

  return (
    <>
      <EmblaCarouselReact
        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={() => embla.scrollPrev()}>Prev</button>
      <button onClick={() => embla.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()}`,
      )
    })
  }

  render() {
    return (
      <>
        <EmblaCarouselReact
          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.embla.scrollPrev()}>Prev</button>
        <button onClick={() => this.embla.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

Get started instantly with one of the CodeSandboxes below.

Basic Setup - With Previous, Next & Dot buttons.

Autoplay - Example of how to setup Autoplay.

Open Source

· · ·