@maker-ui/carousel v2.1.1

@elements-ui/carousel

An accessible carousel component built with react-spring that works seamlessly with a Theme UI theme provider or an Elements UI layout.

Installation

npm i @elements-ui/carousel

Usage

Carousel does not make any assumptions about the data you want to cycle through (text, photos, videos, etc.). Simply build your own custom template component and iterate over an array of data.

You can style your carousel with the sx prop as well as variants or classNames (see below).

import React from 'react'
import { ThemeProvider } from 'theme-ui'
import Carousel from '@elements-ui/carousel'

import theme from './theme'

const slideData = [
  { message: 'hi', class: '1' },
  { message: 'hiya', class: '2' },
  { message: 'hello', class: '3' },
]

const Slide = ({ message, class }) => <div className={class}>{message}</div>

export default () => (
  <ThemeProvider theme={theme}>
    <Carousel
      data={slideData}
      template={<Slide />}
      autoPlay
      duration={4500}
      transition="fade"
    />
  </ThemeProvider>
)

Props

Styling

Carousel supports both Theme UI variants as well as CSS selectors so you can customize the appearance of your design in any way.