StepByStep.js is a simple and cute diagram for your ul-lists based on jQuery.
##Documentation
It just take seconds to install and use StepByStep.js
- HTML
<div class="StepByStep">
<ul>
<li>
<div class="step-details">
<h3>First Title</h3>
<p>Some description</p>
</div>
</li>
<li>
<div class="step-details">
<h3>Second Title</h3>
<p>Some description</p>
</div>
</li>
</ul>
</div>- JavaScript
$('.StepByStep').StepByStep() //.StepByStep is a class of a parents div- JavaScript
$('.StepByStep').StepByStep({
lineColor: "#e7e7e7", // Color of background line
active: 1, // mount of active thumbs
inactiveColor: '#e7e7e7', // Color of inactive thumbs
numColor: '#222', // Font color of inactive thumbs
numColorActive: '#fff', // Font color fof active thumbs
activeColors: ['#ec0101','#ffbf00', '#00a9fe', '#1bb012', '#888'], // Array of colors of active thumbs
colorLast: '#004179', // Color for last thumb which when clicked, transported you to the next element
after: 'StepByStep-after' // ID of next element to which you will transfer
});If you find a bug, please report it here on Github!
Developed by Vlad Kampov, kampov.com