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.