Rano React Carousel 🎠

Introduction

Hope this helps anyone using this package.
(React Carousel with TypeScript)

Install

Install with npm:

$ npm install --save rano-react-carousel

Props

| key | value (default) | description | | :-----------------------: | :--------------: | :-------------------------------------------------------------------------------------------: | | infiniteLoop | false | Going after the last item will move back to the first slide. | | itemsDisplayedCount | 4 | Sets the number of items that can be seen in the carousel. | | numberOneClickMoveItems | 1 | Sets the number of items that are moved in the carousel when the carousel is operating. | | autoPlayOptions | false(undefined) | Specify the direction and move the slide at regular intervals. | | showButtons | true | Set whether to display the carousel button. | | iconRatio | 10 | Sets the carousel button size ratio. (Percentage proportional to carousel height) | | animationDelay | 400 | Animation transition speed in millisecond. | | buttonStyle | false(undefined) | Specifies the style of the carousel button. |

type TCarouselButtonStyle = {
  icon?: JSX.Element | string;
  style?: React.CSSProperties;
};

type TCarouselAutoPlayOptions = {
  direction: "left" | "right";
  timeInterval?: number;
  stopOnHover?: boolean;
};

type TCarouselProps = {
  infiniteLoop?: boolean;
  itemsDisplayedCount?: number;
  numberOneClickMoveItems?: number;
  autoPlayOptions?: TCarouselAutoPlayOptions;
  showButtons?: boolean;
  iconRatio?: number;
  animationDelay?: number;
  buttonStyle?: {
    left?: TCarouselButtonStyle;
    right?: TCarouselButtonStyle;
  };
  style?: React.CSSProperties;
  children?: React.ReactNode | React.ReactNode[];
};

Example

import styled from "styled-components";
import Carousel, { TCarouselProps } from "rano-react-carousel";

const App = () => {
  const carouselProps: TCarouselProps = {
    numberOneClickMoveItems: 3,
    itemsDisplayedCount: 5,
    animationDelay: 200,
    autoPlayOptions: {
      direction: "right",
      stopOnHover: true,
      timeInterval: 1000,
    },
    buttonStyle: {
      left: { icon: "<", style: { color: "red" } },
      right: { icon: ">", style: { color: "blue" } },
    },
    infiniteLoop: true,
    showButtons: true,
    iconRatio: 20,
    // style, children
  };

  const cards = () => {
    const SIZE = 11;
    return [...Array(SIZE)].map((_, i) => <Card key={i}>{i + 1}</Card>);
  };

  return (
    <AppLayout>
      <Carousel {...carouselProps}>{cards()}</Carousel>
    </AppLayout>
  );
};

export default App;

const AppLayout = styled.div`
  width: 1440px;
  margin: 0 auto;
`;

const Card = styled.div`
  min-width: 200px;
  min-height: 200px;
  border: 1px solid #1974be;

  display: flex;
  justify-content: center;
  align-items: center;

  font-size: 16px;
`;