2.0.3 • Published 27 days ago

react-carousel-ts v2.0.3

Weekly downloads
-
License
MIT
Repository
github
Last release
27 days ago

React-carousel- ts

npm bundle size

Ultra-light carousel component for React

SVO0w.gif

Installation

Install the package using npm:

npm i -D react-carousel-ts

Usage

import { Carousel, CarouselProps } from '@/carousel';
import cls from '@/app/styles/index.module.scss';

export const App = () => {
  const data = [
    <div className={cls.example}>1</div>,
    <div className={cls.example}>2</div>,
    <div className={cls.example}>3</div>,
  ];

  const props: CarouselProps = {
    className: cls.carousel,
    items: data,
    speed: 500,
    showDots: false,
    autoplay: true,
    autoplaySpeed: 1500,
    visibleItemCount: 2,
  };

  return (
    <div className={cls.App}>
      <Carousel {...props} />
    </div>
  );
};

Props

NameTypeDefaultDescription
itemsCarouselListItems[]Items to display.
classNamestring''CSS class for styling.
showDotsbooleantrueShows navigation dots.
showArrowsbooleantrueShows navigation arrows.
speednumber500Transition speed in ms.
autoplaybooleanfalseEnables automatic cycling.
autoplaySpeednumber4000Speed of autoplay in ms.
visibleItemCountnumber1Number of visible items.
widthstring \| number'600px'Width of the carousel.
heightstring \| number'400px'Height of the carousel.
2.0.3

27 days ago

2.0.2

27 days ago

2.0.1

28 days ago

2.0.0

28 days ago

1.1.0

1 month ago

1.0.0

1 month ago

0.1.1

1 month ago

0.1.0

1 month ago