React component with dots and arrows, designed to navigate any of the sliders and galleries.
<Dotnav
index={index}
count={count}
withArrows
/>If you use CSS Modules you can import styles and pass them as property:
import classes from 'dotnav/lib/Dotnav.css';
<Dotnav
index={index}
count={count}
withArrows
classes={classes}
/>Or you can concat static styles from the package: 'dotnav/lib/styles.css'
npm install dotnav
| Property | Required | Type | Default Value | Available Values | Description |
|---|---|---|---|---|---|
| index | true | number | 0 | From 0 to count - 1 | Current active dot |
| count | true | number | 0 | Any number | The number of points |
| withArrows | false | bool | false | true, false |
Whether arrows are visible or not |
| handleChange | true | func | Callback | ||
| classes | false | shape | { root: 'dotnav', dots: 'dotnav-dots', dot: 'dotnav-dot', dotActive: 'dotnav-dot Dotnav-dot_active', arrowPrev: 'dotnav-arrow Dotnav-arrow_prev', arrowNext: 'dotnav-arrow Dotnav-arrow_next' } |
Classnames for elements |
Dotnav specially crafted for Animakit. See https://animakit.github.io for more details.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent