react-clean-carousel

A simple carousel component with navigation and formattable styling.

Usage

import {
  Carousel,
  Slide
} from 'react-clean-carousel'

import '../node_modules/react-clean-carousel/dist/main.css';
.
.
.
<Carousel>
  <Slide imageUrl="https://picsum.photos/900/400">
    children (whatever you want to put IN the slide e.g buttons, links, etc)
  </Slide>
</Carousel>

Properties (props with ? at the end are optional)

Carousel component

| Prop | Type | Default | Definition | |:----------------:|:------------------------------------------------:|:--------------------------------:|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:| | size | string | 'large' | Defines the size of the carousel. 'large' is the standard 1400px wide on a FullHD panel, while the others may be used for other use cases: 'medium-large', 'medium', 'small', 'verysmall', respectively. | children | Slide[] | undefined | The slides that will be used in the carousel, each with their own props. | | autoplay? | boolean | true | Defines if the carousel should loop through the slides automatically. | | autoplayIntervalTime? | number | 5000 | The time between each slide changing to the next, defined in miliseconds. | | mainStyle? | React.CSSProperties | undefined | Used to override the styling of the main container of the carousel, should you need it. | | innerStyle? | React.CSSProperties | undefined | Overrides the styling of the inner container of the carousel, the one that contains the Slides as its children. | | arrowsNav? | boolean | true | Defines if you want to have arrow navigation or not. | | dotsNav? | boolean | true | Defines if you want navigation with dots or not. | | arrowsContainerStyle? | React.CSSProperties | undefined | Used to override the styling of the container of the navigation arrows, should you need to. | | previousArrowStyle? | React.CSSProperties | undefined | Override the style of the previous slide navigation arrow | | nextArrowStyle? | React.CSSProperties | undefined | Override the style of the next slide navigation arrow | | dotsContainerStyle? | React.CSSProperties | undefined | Used to override the styling of the navigation dots' container. | | dotStyle? | React.CSSProperties | undefined | Overrides the styling of the individual dots. |

Slide component

| Prop | Type | Default | Definition | |:----------------:|:------------------------------------------------:|:--------------------------------:|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:| | imageUrl | string | undefined | The url for the background image of that slide. | | linkUrl? | string | undefined | A url you can add if you want the whole image of the slide to be a link| | children | React.ReactNode[] | undefined | Whatever JSX children you may want to pass into that slide to have (links, buttons, etc.) | | style? | React.CSSProperties | undefined | Overrides the styling for the Slide container. |

License

MIT © markbayor