Dotnav

React component with dots and arrows, designed to navigate any of the sliders and galleries.

Usage

<Dotnav
  index={index}
  count={count}
  withArrows
/>

Styles

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'

Demo

Installation

npm install dotnav

Properties

| 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 |

Idea

Dotnav specially crafted for Animakit. See https://animakit.github.io for more details.