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/[email protected]/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/[email protected]/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

Dots props