A simple but epic React Responsive Carousel.
npm install --save react-rapid-carousel
clone and test our github repo https://github.com/chineduogada/react-rapid-carousel
, and cd ./example/src/Demos
for more examples
import React, { useState } from 'react'
import { Slider, Fader } from 'react-rapid-carousel'
import 'react-rapid-carousel/dist/index.css'
import Card from 'card' // this Component are `children` of the `Slider`. For the best visual results, don't add `width` style property on it or `width: auto` is still okay.
const App = () => {
const [products, setHeroes] = useState([])
useEffect(() => {
setTimeout(() => {
setHeroes([
{ id: 1, title: 'car' },
{ id: 1, title: 'bike' },
{ id: 1, title: 'phone' },
{ id: 1, title: 'laptop' }
])
}, 1000)
}, [])
return (
<div>
<Slider>
{products.map((hero) => (
<Card data={hero} key={hero.id} />
))}
</Slider>
<Slider
// the `length` is endless :)
breakpoints={[
// define any width you want to break, but from from small to large widths
{ width: 391, slidesToShow: 1 },
{ width: 592, slidesToShow: 2 },
{ width: 830, slidesToShow: 3 },
{ width: 920, slidesToShow: 4 }
]}
>
{products.map((hero) => (
<Card data={hero} key={hero.id} style={{ width: 'auto' }} />
// Bad `width` style prop :(, Don't do it! Allow the Component do it for you, or use `breakpoints`
for responsive desire
// <Card style={{ width: '200px' }} data={hero} key={hero.id} />
))}
</Slider>
// Best for rendering static content (Synchronous rendering)
<Fader>
<div>hi</div>
<div>hello</div>
<div>welcome</div>
<div>goodbye</div>
</Fader>
</div>
)
}
Prop | Type/Default | Description |
---|---|---|
quickSlide | boolean/false |
Works with autoSlide and depends on slidesToShow : basically moves in sections: which makes much faster |
dots | boolean/false |
Depends on slidesToShow : display dots below the Component for moving the slides to a particular section |
buttons | boolean/true |
Display caret button: (next and prev buttons) for moving the slide back and forth |
slidesToShow | number/1 |
The amount of slides to display at a time |
transition | string/"0.5s ease-in" |
Css transition property |
children | Array<HTMLElement> || HTMLElement/null |
These are the total amount slides to be eventually displayed: all slides, For the best visual results, don't add width style property on it or width: auto is still okay |
breakpoints | Array<{width: number: slidesToShow: number}>/null |
For responsive experience: width s should be arranged in an ascending manner/order to get the desired result |
autoSlide | boolean/false || {reverse: boolean/false , pauseOnHover: boolean/true , pauseOnTab: boolean/true , interval: number/3800 } |
Adds animation: which happens after every interval which can be paused when the user hovers on the Slider or tabs on any focusable element and move in a reverse mode, if specified though |
Fader can only render one slide
at a time: perfect for heroes
, banners
, ads
etc.... has lesser functionalities (but slower in performance, and should be used for rendering static content for best performance).
Prop | Type/Default | Description |
---|---|---|
dots | boolean/true |
Depends on slidesToShow : display dots below the Component for moving the slides to a particular section |
buttons | boolean/false |
Display caret button: (next and prev buttons) for moving the slide back and forth |
transition | string/"0.5s ease-in" |
Css transition property |
children | Array<HTMLElement> || HTMLElement /null |
These are the total amount slides to be eventually displayed: all slides, For the best visual results, don't add width style property on it or width: auto is still okay |
autoSlide | boolean/true || {pauseOnHover: boolean/true , pauseOnTab: boolean/true , , interval: number/3800 } |
Adds animation: which happens after every interval which can be paused when the user hovers on the Slider or tabs on any focusable element and move in a reverse mode, if specified though |
import React, { useState } from 'react'
import { ThemeProvider, Slider, Fader } from 'react-rapid-carousel'
import 'react-rapid-carousel/dist/index.css'
const App = () => {
return (
<ThemeProvider
theme={{
dots: { 1: 'red', 2: 'orange' },
carets: { 1: '#333', 2: '#3332' }
}}
>
<Slider>
<div>hi</div>
<div>hello</div>
</Slider>
<ThemeProvider
theme={{
dots: { 1: 'blue', 2: 'cyan' },
carets: { 1: 'gold', 2: 'rbg(20, 100, 225)' }
}}
>
<Fader>
<div>hi</div>
<div>hello</div>
</Fader>
</ThemeProvider>
</ThemeProvider>
)
}
Prop | Type / Default |
---|---|
theme | Object / { dots: { 1: '#333', 2: '#3332' }, carets: { 1: '#333', 2: 'transparent' } } |
MIT © chineduogada