React Whirlpool Carousel

carousel-recording.mp4

vertical-carousel-recording.mov

Features

• Responsive
• Customize previous and next buttons
• Bi-directional - horizontal and vertical
• Auto play

Installing

yarn add react-whirlpool

Important

Make sure to import the css file with import 'react-whirlpool/dist/cjs/component/SimpleCarousel.css'

Usage

import React, { useRef, useState } from "react";
import { SimpleCarousel } from "react-whirlpool";
import 'react-whirlpool/dist/cjs/component/SimpleCarousel.css' // => important

function App() {
  const [list, setList] = useState(["A", "B", "C", "D", "E"]);
  const simpleCarouselRef = useRef<any>();
  const [activeIndex, setActiveIndex] = useState(0);

  return (
    <div >
      <SimpleCarousel
        isHorizontal={true}
        gap={20}
        autoPlay={false}
        minHeight="254px"
        ref={simpleCarouselRef}
        hideArrows={true}
        onActiveIndexUpdate={(index: number) => setActiveIndex(index)}
      >
        {list.map((item: string, key) => (
          <div key={key}>
            {item}
          </div>
        ))}
      </SimpleCarousel>
      //custom prev and next buttons
      <button
        onClick={() => {
          simpleCarouselRef.current &&
            simpleCarouselRef.current.handlePrevEvent();
        }}
      >
        Prev
      </button>
      <button
        onClick={() => {
          simpleCarouselRef.current &&
            simpleCarouselRef.current.handleNextEvent();
        }}
      >
        Next
      </button>
    </div>
  );
}

export default App;

Props

Name	Value	Description
isHorizontal	boolean	Define the direction of the slider, defaults to 'horizontal'.
children	JSX Element	Pass any number of JSX elements (carousel cards) which are to be rendered in the carousel
gap	number	Define gap (in px) between two carousel cards
minHeight	string, optional	Define the minimum height of the carousel container
minWidth	string, optional	Define the minimum width of the carousel container
onActiveIndexUpdate	function, optional	Takes an active index (number) as argument to update selected index in SimpleCarousel
autoplay	boolean, default false, optional	Enable auto rotation of carousel, rotation interval is set to 3000ms
autoPlayInterval	number, default 3000, optional	Auto-play interval in milliseconds
hideArrows	boolean, default true, optional	Hide default arrows
hideDevPanel	boolean, default true, optional	Hide dev panel
hideInitGap	boolean, default true, optional	Hide initial gap between the first card and carousel container
ref	any, optional	Create and pass reference to access the handler methods - 1. handlePrevEvent() to handle previous button clicking event and 2. handleNextEvent() to handle next button clicking event

Common Issues

1. CJS WARNING - Failed to parse source map => Workaround - Link