Basic Carousel
A Basic carousel implementation using react, typescript and css.
Usage
- Install the package
npm i --save @niki4810/basic-carousel
- Import the component in your code
import {BasicCarousel} from "@niki4810/basic-carousel"
- Render the carousel
const Parent = () => {
const tileStyles = {width: "250px",height: "350px",background: "#dce4ef",color: "#212121"};
return (
<BasicCarousel>
<div style={tileStyle}>Tile 1</div>
<div style={tileStyle}>Tile 2</div>
<div style={tileStyle}>Tile 3</div>
<div style={tileStyle}>Tile 4</div>
<div style={tileStyle} >Tile 5</div>
<div style={tileStyle} >Tile 6</div>
<div style={tileStyle} >Tile 7</div>
<div style={tileStyle} >Tile 8</div>
<div style={tileStyle} >Tile 9</div>
<div style={tileStyle} >Tile 10</div>
</BasicCarousel>
);
}
- Import the styles in your root css file:
@import '@niki4810/basic-carousel/dist/basic-carousel.css';
Available props
Here are the available carousel props
Prop | Description | Default |
---|---|---|
showPaginationButtons | Determines if the bottom pagination buttons should be rendered. | true |
paginationButtonsPosition | Determines if left and right chevron pagination buttons should be rendered outside the carousel or on top of the carousel | PaginationButtonPositions.outside |
showPaginationDots | Determines if the bottom pagination dots should be rendered. | true |
onSlideChange | A callback function that returns an array of child tile indexes fully visible in the carousel viewport.Dispatched once when the slides are calculated (like the initial mount), every time when slides are changed due to pagination or resizing of the window. This is provided as a handle to identify which tiles are fully visible to users so that the consumers can take further actions as per the application needs. | () => {} |
Examples
You can view code examples by running the storybook:
npm run storybook
- Visit http://localhost:6006/