Package Exports

react-carousel-light

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-carousel-light) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Lightweight React Carousel

Customizable, Responsive and swipeable.

Install

npm install --save react-carousel-light

Demo

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

Demo Gif

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'
}

react-carousel-light