0.4.8 • Published 1 year ago

@shivamchamoli1997/carousel v0.4.8

Weekly downloads
-
License
MIT
Repository
github
Last release
1 year ago

Simple carousel for react.

    import {Carousel, CarouselItem } from '@shivamchamoli1997/carousel';

    <Carousel infiniteSlide={false} autoSlide={false} autoSlideInterval={1000}
      pauseOnHover={true} showIndicators={true}
      leftIndicator={<LeftIndicator />}
      rightIndicator={<RightIndicator />}
      indicatorPosition={'1'}
      allowSwipe={true}
      rightIndicatorClass=""
      leftIndicatorClass=""
      tansition={0.5}>
      <CarouselItem>Item 1</CarouselItem>
      <CarouselItem>Item 2</CarouselItem>
      <CarouselItem>Item 3</CarouselItem>
    </Carousel>

Note - You need to import carousel css from root app:-

import '@shivamchamoli1997/carousel/dist/index.css';

Carousel properties:

currentIndex: number -> current index of slide
infiniteSlide: boolean -> allow to infinitely slide
autoSlide: boolean -> allow auto slide of items
autoSlideInterval: number -> give auto slide interval time
pauseOnHover: boolean -> allow pause of active slide if autoslide is true
showIndicators: boolean -> allow default indicators
indicatorPosition: '1' | '2' | '3' -> set indicators position. default is '1'
leftIndicator: JSX.Element -> set the left indicator with the react element
rightIndicator: JSX.Element -> set the right indicator with the react element
leftIndicatorClass?: string -> left indicator class set to parent left indicator element if provided.
rightIndicatorClass?: string -> right indicator class set to parent right indicator element if provided
tansition?: string | number -> transition time between slide change
allowSwipe: boolean -> set true to allow swipe effect in carousel
0.4.8

1 year ago

0.4.5

1 year ago

0.4.4

1 year ago

0.4.7

1 year ago

0.4.6

1 year ago

0.4.1

3 years ago

0.4.0

3 years ago

0.4.3

3 years ago

0.4.2

3 years ago

0.3.3

3 years ago

0.3.2

3 years ago

0.3.1

3 years ago

0.3.0

3 years ago

0.2.5

3 years ago

0.2.4

3 years ago

0.2.3

3 years ago

0.2.2

3 years ago

0.2.1

3 years ago

0.2.0

3 years ago

0.1.0

3 years ago