react-awesome-carousel

React-awesome-carousel

Demo

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>

Props

Carousel Props

Prop	Type	Description
autoCorrect	Boolean	Set true if you want to correct the position of items after scrolling or moving.
enableScrolling	Boolean	it enables scrollbar usage
enableMoving	Boolean	it enables moving items with mouse events.For using this in mobile devices check the prop touch
touch	Boolean	The touch prop allows you to using enableMoving prop in mobile devices using touch event instead of mouse event.
itemWidth	Number	Set the with of item in the carousel.The number must be fixed for all items.
showCount	Number	Sets the count of items in carousel.
onReachEnd	Function	This function runs when you reach the end of the carousel.
onReachForMouseUp	Boolean	The `onReachEnd` function runs when you finish moving with the mouse
onReachForMove	Boolean	The `onReachEnd` function runs while moving
onReachForScroll	Boolean	The `onReachEnd` function runs while scrolling
onReachForScrollEnd	Boolean	The `onReachEnd` function runs when the scroll bar reached the end of its width.
onReachForDots	Boolean	The `onReachEnd` function runs when you click on the last dot.
nextAfterFetchStarts	Number	After a given time you will go to the next carousel's item

Dots props

Prop	Type	Description
renderDots	Function	Rendering dots elements
goTo	Function	The value must be goTo={i => goTo(i)}