Package Exports
- @gdo-bzh/carousel
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 (@gdo-bzh/carousel) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
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-iconsUsage
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