Lightweight React Carousel

Customizable, Responsive and swipeable.

Install

npm install --save react-carousel-light

Demo

https://mlinfomc.github.io/react-carousel-light/

Usage

Default

import React from "react";
import Carousel from 'react-carousel-light';

<Carousel>
  <div>..</div>
  <div>..</div>
  <div>..</div>
</Carousel>

Adjust scroll speed:

import React from "react";
import Carousel from 'react-carousel-light';

<Carousel 
  navButtonScrollLength={800} 
  navButtonScrollDuration={500} 
  easing="in-out-cube"
>
  ...
</Carousel>

Custom styles:

import React from "react";
import Carousel from 'react-carousel-light';

/**
 * Option 1: use style props.
 */
<Carousel 
  wrapperStyle={{width: "100%"}} 
  listStyle={{padding: "20px"}} 
  navButtonStyle={{...}}
  navButtonIconColor="#425e7a"
  navButtonIconSize="25"
>
  ...
</Carousel>

/**
 * Option 2: overwrite css classes.
 */
// Carousel wrapper
.carousel-wrapper {...}
// Carousel list
.carousel-list {...}
// Both nav buttons
.carousel-nav-button {...}
// Backward button only
.carousel-nav-button.carousel-nav-button-prev {...}
// Forward button only
.carousel-nav-button.carousel-nav-button-next {...}

Events:

import React from "react";
import Carousel from 'react-carousel-light';

<Carousel 
  onListScroll={...} 
  onBackwardButtonClick={...} 
  onForwardButtonClick={...}
  afterScroll={...}
>
  ...
</Carousel>

Use your own nav button:

import React from "react";
import Carousel from 'react-carousel-light';

const buttonPrevRef = useRef(null);
const handlePrevButtonClick = () => {
  // Use forwarded ref to trigger scrolling manually
  buttonPrevRef.current.click();
};
const handleAfterScroll = ({
  isScrollable, hasReachedStart, hasReachedEnd, totalSlides, currentSlideIndex
}) => {
  // use these props to do something else
};

return (
  <>
    <MyPrevButton onClick={handlePrevButtonClick} disabled={hasReachedStart}>...</MyPrevButton>
    <CarouselLight
      navButtonPrevRef={buttonPrevRef}
      afterScroll={handleAfterScroll}
    >
      ...
    </Carousel>
  </>
);

Props

interface IProps {
  /**
   * (required) Carousel list items.
   */
  children: JSX.Element | JSX.Element[];
  /**
   * (optional) Custom carousel wrapper style.
   */
  wrapperStyle?: object;
  /**
   * (optional) Custom carousel list style.
   */
  listStyle?: object;
  /**
   * (optional) Custom carousel nav button style.
   */
  navButtonStyle?: object;
  /**
   * (optional) Set the scrolling pixel value per nav button click. Default value is 500.
   */
  navButtonScrollLength?: number;
  /**
   * (optional) Set the animation duration in milliseconds per nav button click. Default value is 350.
   */
  navButtonScrollDuration?: number;
  /**
   * (optional) Set nav button arrow icon color. Default color is black.
   */
  navButtonIconColor?: string;
  /**
   * (optional) Set nav button arrow icon size. Default size is 20.
   */
  navButtonIconSize?: string;
  /**
   * (optional) Forward ref to the prev button.
   */
  navButtonPrevRef?: React.MutableRefObject<any>;
  /**
   * (optional) Forward ref to the next button.
   */
  navButtonNextRef?: React.MutableRefObject<any>;
  /**
   * (optional) A function will be called on carousel scroll. Be sure to have throttle handling in your code.
   */
  onListScroll?: () => void;
  /**
   * (optional) A function will be called on backwards nav button click. This function is called before scroll happens.
   */
  onBackwardButtonClick?: () => void;
  /**
   * (optional) A function will be called on forward nav button click. This function is called before scroll happens.
   */
  onForwardButtonClick?: () => void;
  /**
   * (optional) A function will be called after the scroll position has been changed.
   */
  afterScroll?: (
    {isScrollable, hasReachedStart, hasReachedEnd, totalSlides, currentSlideIndex}
    : {
      isScrollable?: boolean, 
      hasReachedStart?: boolean, 
      hasReachedEnd?: boolean, 
      totalSlides?: number, 
      currentSlideIndex?: number
    }) => void;
  /**
   * (optional) Set easing function for animation. Default function is 'in-out-cube'.
   */
  easing?: 'linear'
          | 'in-quad'
          | 'out-quad'
          | 'in-out-quad'
          | 'in-cube'
          | 'out-cube'
          | 'in-out-cube'
          | 'in-quart'
          | 'out-quart'
          | 'in-out-quart'
          | 'in-quint'
          | 'out-quint'
          | 'in-out-quint'
          | 'in-sine'
          | 'out-sine'
          | 'in-out-sine'
          | 'in-expo'
          | 'out-expo'
          | 'in-out-expo'
          | 'in-circ'
          | 'out-circ'
          | 'in-out-circ'
          | 'in-back'
          | 'out-back'
          | 'in-out-back'
          | 'in-bounce'
          | 'out-bounce'
          | 'in-out-bounce'
          | 'in-elastic'
          | 'out-elastic'
          | 'in-out-elastic'
}

Release Notes

Release Notes