Clear react carousel easy to integrate, he is very light and use 0 dependency. It is a carousel that will be customizable and offers great posibilities.
Go test the demo online react-clear-carousel demo.
I needed to make a really simple carousel. I looked for a library, but none was as light, simple and modular as I wanted. So I made my carousel and once finished I wanted to share it.
npm install --save react-clear-carousel
# of
yarn add react-clear-carousel
This is the most minimal exemple.
import React from 'react'
import {
CarouselElement,
CarouselWrapper,
NextSlideAction,
PrevSlideAction,
SliderElementProps
} from 'react-clear-carousel'
const datas = [
{ id: 0, text: 'slider 1' },
{ id: 1, text: 'slider 2' },
{ id: 2, text: 'slider 3' }
]
const Carousel = () => {
return (
<div style={{ width: 400 }}>
<CarouselWrapper
reverse={false}
datas={datas}
currentSize={{ element: 116, margin: 10 }}>
<CarouselElement>
<Element />
</CarouselElement>
<PrevSlideAction>
<button>Prev</button>
</PrevSlideAction>
<NextSlideAction>
<button>Next</button>
</NextSlideAction>
</CarouselWrapper>
</div>
)
}
const Element = ({
className,
data
}: SliderElementProps<{ id: number; text: string }>) => {
return (
<div className={className}>
<div style={{ padding: '8px', color: 'red', border: '1px solid blue' }}>
<p>{data?.text}</p>
</div>
</div>
)
}
The carousel is a delimited element that has an overflow: hidden
(๐ orange box) with a much longer child (๐ต blue box) that contains the slides (๐ข green box) and that will change the number of pixels to be moved to the left during a slide animation.
This hook is used by the CarouselWrapper.
import { useSimpleSlider } from 'react-clear-carousel'
export type SimpleSliderConfig = {
listLength: number // length of your datas
size: {
element: number // size of one element
margin: number // margin of one element
}
reverse?: boolean // true and the carousel go left to right
transition?: string // transition when carousel slide change
}
function useSimpleCarousel(
config: SimpleSliderConfig
): {
nextSlide: () => void // handle the next slide
prevSlide: () => void // handle the prev slide,
setSlide: () => void // set slide to specific id,
classes: {
// different class for elements
card: string
flexBox: string
root: string
}
}
import { CarouselWrapper } from 'react-clear-carousel'
export type CarouselWrapperProps<T extends ElementId> = {
datas: T[] // data given for different slide
currentSize: {
element: number // size of one element
margin: number // margin of one element
}
children: React.ReactElement | React.ReactElement[]
reverse?: boolean // true and the carousel go left to right
transition?: string // transition when carousel slide change
}
function CarouselWrapper<T extends ElementId>(props: CarouselWrapperProps<T>)
This element use the context of CarouselWrapper.
import { CarouselElement } from 'react-clear-carousel'
type HorizontalSliderProps = {
children: React.ReactElement // element for each slide
rootClassname?: string // classname for the root
elementBoxClassname?: string // classname for elements flex box
}
function CarouselElement(props: HorizontalSliderProps)
Those elements use the context of CarouselWrapper.
The children will have a onClick
props to handle next / prev slide.
import { NextSlideAction, PrevSlideAction } from 'react-simple-slider'
const Buttons = () => (
<div>
<PrevSlideAction>
<button>Prev slide</button>
</PrevSlideAction>
<NextSlideAction>
<button>Next slide</button>
</NextSlideAction>
</div>
)
MIT ยฉ Melvynx