embla-carousel-react-component-test

Embla Carousel React Component Test

An easy-to-use carousel component based on Embla Carousel for React.

• Motivation
• Installation
• Basic Usage
• Component API
• Examples
• License

Motivation

Embla Carousel is completedly unopinionated about the way you styles the carousels, including the slide container's layout. If you want to reuse the carousels with a different number of slides per view, redeclaration of the container's style is needed, which's not optimal for reusability.

To solve the problem, the component comes with minimal styles needed to layout the container.

Note that the component only covers some common use cases. If you want to achieve extraordinary stuffs with Embla Carousel's internal API, you need to implement yourself.

Installation

To get started, install the component via npm or yarn:

npm install embla-carousel-react-component-test

yarn add embla-carousel-react-component-test

Basic Usage

import Carousel from 'embla-carousel-react-component-test';

<Carousel perView={1} className='mt-4'>
  {[...Array(5).keys()].map((n) => (
    <Carousel.Slide key={n}>
      <div className='h-40 w-full rounded-md bg-slate-300 p-4'>
        Slide {n + 1}
      </div>
    </Carousel.Slide>
  ))}
</Carousel>;

View all the examples

Component API

Carousel

Prop	Type	Default	Description
perView	number	required	The number of slides per view
gap	string	1rem	The spacing between slides
options	EmblaOptionsType	See here	Embla Carousel's options
plugins	EmblaPluginType[]		Embla Carousel's plugins
PrevButton	() => JSX.Element		Previous Button component
NextButton	() => JSX.Element		Next Button component
Dots	() => JSX.Element		Dot Indicators component
Thumbs	() => JSX.Element		Thumbs component
containerStyle	React.CSSProperties	See here	Customize the container's style. To use this prop, remove perView first

options

The component comes with a few opinionated options to ensure it works properly out of the box.

{
  align: 'start',
  slidesToScroll: 'auto',
  containScroll: 'trimSnaps'
}

You can overwrite this by providing your own options.

containerStyle

The component use grid to layout the container.

{
  display: 'grid',
  gridAutoFlow: 'column',
  gridAutoColumns: perView ? `${100 / perView}%` : '100%',
}

You can overwrite this by providing your own styles.

Carousel.PrevButton, Carousel.NextButton

Prop	Type	Default	Description
disabledClassName	string	disabled	ClassName for disabled state

The components also expose a data-disabled attribute that you can use to conditionally apply different styles.

Carousel.Dots

Prop	Type	Default	Description
selectedClassName	string	selected	ClassName for selected state
nonSelectedClassName	string		ClassName for non-selected state (Tailwind CSS users may need this)

The component also exposes a data-selected attribute that you can use to conditionally apply different styles.

Carousel.Thumbs

Prop	Type	Default	Description
perView	number	required	The number of thumbs per view
gap	string	1rem	The spacing between thumbs

Carousel.Thumb

Prop	Type	Default	Description
index	number	required	The index of thumb item
selectedClassName	string	selected	ClassName for selected state
nonSelectedClassName	string	1rem	ClassName for non-selected state (Tailwind CSS users may need this)

The component also exposes a data-selected attribute that you can use to conditionally apply different styles.

Examples

Basic

• Default
• Right To Left
• Slides To Scroll
• Drag Free
• Align
• VariableWidths
• YAxis
• Arrows and Dots
• Thumbnails

Plugins

• Autoplay
• Class Names
• Wheel Gestures

License

MIT