StepByStep.js

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

LIVE DEMO ➫

Dependencies

• jQuery

Basic usage

• 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

Advanced usage

• 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
  });

Bug tracker

If you find a bug, please report it here on Github!

Developer

Developed by Vlad Kampov, kampov.com

• @Vlad Kampov
• Github Profile