carousel

A content carousel with animation support and many customizable options. A carousel is a slideshow for cycling through a series of slides (image, video, audio, text, etc.). You can:

• navigate backward/forward
• navigate to a specific slide
• play/pause the slideshow

This package contains the following core components :

• Carousel: the top-level component that provides a ready-to-use carousel
• Slides: The slides component houses each individual slide
• Controls: component that controls the navigation backward and forward through the slides. It is composed of the PreviousSlideButton and the NextSlideButton components
• PreviousSlideButton: button component that controls the navigation backward through the slides
• NextSlideButton: button component that controls the navigation backward through the slides
• PlayPauseButton: toggle button to play/pause the slideshow
• ProgressDurationIndicator: user feedback to show the duration an image is visble on the screen during slideshow
• NavBar: component that allows to navigate to a specific slide among the complete list
• NavBarItem: the navBar item component composing the navbar component

Install

yarn add @gdo-bzh/carousel @gdo-bzh/use-carousel-state react styled-components react-icons

npm install --save @gdo-bzh/carousel @gdo-bzh/use-carousel-state react styled-components react-icons

Usage

import React from 'react'

import { Carousel } from '@gdo-bzh/carousel'

const slides= [..., {/* slide i */}, ..., {/* slide n */}]

<Carousel>
    {({ currentIndex }) => (
      <>
        <Carousel.Slides>
          {slides.map((slide, index) => (
            <Slide
              key={slide.id}
              src={slide.src}
              aria-label={`Slide ${index + 1}`}
              style={{ display: index === currentIndex ? 'block' : 'none' }}
            />
          ))}
        </Carousel.Slides>
        {children}
      </>
    )}
  </Carousel>

Api

type UseCarouselStateReturnType = ReturnType<typeof useCarouselState>

type Props = React.HTMLAttributes<HTMLDivElement> &
  Partial<State> & {
    children: (state: UseCarouselStateReturnType) => React.ReactNode
  }

type CarouselFC = React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>> & {
  Slides: React.FC
  Controls: React.FC<React.ComponentProps<typeof Controls>>
  PreviousSlideButton: React.FC<React.ComponentProps<typeof PreviousSlideButton>>
  NextSlideButton: React.FC<React.ComponentProps<typeof NextSlideButton>>
  PlayPauseButton: React.FC<React.ComponentProps<typeof PlayPauseFab>>
  ProgressDurationIndicator: React.FC<React.ComponentProps<typeof ProgressDurationIndicator>>
  NavBar: React.FC<React.ComponentProps<typeof NavBar>>
  NavBarItem: React.FC<React.ComponentProps<typeof NavBarItem>>
}

License

MIT © gdo-bzh