react-awesome-carousel v1.0.5
React-awesome-carousel
Installation
via NPM
npm i react-awesome-carousel
via Yarn
yarn add react-awesome-carousel
via CDN (unpkg)
https://unpkg.com/react-awesome-carousel@1.0.5/dest/react-awesome-carousel.js
UMD library exposed as ReactAwesomeCarousel
const { Carousel, Dots } = ReactAwesomeCarousel;
Stylesheet
import "react-awesome-carousel/react-awesome-carousel.css";
via CDN (unpkg)
https://unpkg.com/react-awesome-carousel@1.0.5/dest/react-awesome-carousel.css
The basic carousel sample.The Carousel component returns a callback function with the following arguments. So, you can deeply customize the render.
galleryProps
and ulProps
must be passed down to the elements
<Carousel itemWidth={320} showCount={4} data={this.state.data}>
{(galleryProps, ulProps, data) => {
return (
<div>
<div {...galleryProps}>
<ul {...ulProps}>{this.state.data.map(renderItem)}</ul>
</div>
</div>
);
}}
</Carousel>
But the Carousel component also returns other arguments, like step
, goTo
, next
, prev
, Scrollbar
, DotsProps
Moving and Touching
<Carousel enableMoving={true} ... />
For touch devices
For the component to work, for example, on mobile devices, set the value to true for touching.
<Carousel enableMoving touch />
Scrollbar
Set the value true
for enableScrollbar
and place the Scrollbar
argument in your jsx template
<Carousel enableScrollbar={true} {...}>
{(galleryProps, ulProps, data, step, goTo, next, prev, Scrollbar) => {
return (
<div>
<div {...galleryProps}>
<ul {...ulProps}>{this.state.data.map(renderItem)}</ul>
</div>
{Scrollbar}
</div>
);
}}
</Carousel>;
Auto Correcting
When you stop moving your mouse triggers a function which calculates the position of the elements.
Set the value true
for the prop autoCalculate
.
Lazy Load
For example, you want to fetch data or trigger some function when you reach the end of the carousel.
<Carousel onReachEnd={::this.fn} />
You specified a function, but you also need to tell the component when to run it.
It has a few props
- onReachForMouseUp - When you finish moving with the mouse, the
mouseup
event starts - onReachForMove - While moving
- onReachForScroll - While scrolling
- onReachForScrollEnd - When the scroll bar reached the end of its width.
- onReachForDots - Wwhen you click on the last dot.
Also, there is a prop nextAfterFetchStart
.it accepts the number.When you want to display a spinner while extracting data, you will surely want to see the spinner .when the spinner will be shown you will do the following.
<Carousel onReachEnd={::this.fn} onReachForMove nextAfterFetchStarts={10} /> // 10ms
After 10 milliseconds you will go to the next item, which means that you will see a spinner.
The default value for nextAfterFetchStarts
is 0
this.setState({ data: this.state.data.concat({ status: "LOADING" }) });
const renderItem = (value, index) =>
typeof value === "object" ? (
<li className="renderItem" key={index}>
<h1>Loading...</h1>
</li>
) : (
<li className="renderItem" key={index}>
<h1>{value}</h1>
</li>
);
Dots
import Dots
component from the package.
import { Carousel, Dots } from "react-awesome-carousel";
DotsProps
must be passed to the Dots
component
<Carousel {...}>
{(galleryProps, ulProps, data, step, goTo, next, prev, Scrollbar, DotsProps) => {
return (
<div>
<div {...galleryProps}>
<ul {...ulProps}>{this.state.data.map(renderItem)}</ul>
</div>
<Dots renderDots={renderDots} goTo={(i) => goTo(i)} {...DotsProps} /> // here is your dots
</div>
);
}}
</Carousel>;
Render your dots with renderDots
const renderDots = (index, goTo, active) => (
<li onClick={goTo.bind(null, index)} className={active ? "renderDots active yourClassName" : "renderDots"} key={index}>
{index}
</li>
);
Buttons
Use the arguments next()
and prev()
from the callback.
<Carousel {...}>
{(galleryProps, ulProps, data, step, goTo, next, prev, Scrollbar, DotsProps) => {
return (
<div>
<button onClick={() => next()}>Prev</button>
<div {...galleryProps}>
<ul {...ulProps}>{this.state.data.map(renderItem)}</ul>
</div>
<Dots renderDots={renderDots} goTo={i => goTo(i)} {...DotsProps} /> // here is your dots
<button onClick={() => prev()}>Next</button>
</div>
);
}}
</Carousel>