Add the nav wrapper, as many sections as you like and Dot Nav will do the rest.
See the demo.
Call the function on all section elements and define your easing method.
dotNav('section', 'easeInOutCubic');Here are the easing methods available.
linear
easeInQuad
easeOutQuad
easeInOutQuad
easeInCubic
easeOutCubic
easeInOutCubic
easeInQuart
easeOutQuart
easeInOutQuart
easeInQuint
easeOutQuint
easeInOutQuint<nav id="dot-nav"></nav>
<section></section>
<section></section>
<section></section>Style the nav to suit your needs.
nav#dot-nav {
position: fixed;
right: 20px;
top: 20px;
}
nav#dot-nav a {
border: 1px solid #121212;
border-radius: 50%;
width: 8px;
height: 8px;
display: block;
margin: 10px;
}
nav#dot-nav a.active, nav#dot-nav a:first-child {
background: #121212;
}