SmartWizard jQuery

 Here is a easy to use jQury SmartWizard. 

Coded By: Dipu Raj
CodePen: https://codepen.io/techlab/pen/JjGZvaz


Html:

<div id="smartwizard">
    <ul class="nav">
       <li>
           <a class="nav-link" href="#step-1">
              Step 1
           </a>
       </li>
       <li>
           <a class="nav-link" href="#step-2">
              Step 2
           </a>
       </li>
       <li>
           <a class="nav-link" href="#step-3">
              Step 3
           </a>
       </li>
       <li>
           <a class="nav-link" href="#step-4">
              Step 4
           </a>
       </li>
    </ul>
 
    <div class="tab-content">
       <div id="step-1" class="tab-pane" role="tabpanel">
          Step 1 content
       </div>
       <div id="step-2" class="tab-pane" role="tabpanel">
          Step 2 content
       </div>
       <div id="step-3" class="tab-pane" role="tabpanel">
          Step 3 content
       </div>
       <div id="step-4" class="tab-pane" role="tabpanel">
          Step 4 content
       </div>
    </div>
</div>


Css:

body {
  font-family: system-ui;
  padding: 5%;
}


JS:

$(document).ready(function(){
 
  // SmartWizard initialize
  $('#smartwizard').smartWizard({
    theme: 'arrows',
    keyboardSettings: {
      keyNavigation: true,
      keyLeft: [74], // J key code
      keyRight: [75] // K key code
    } 
  });
 
});

Post a Comment

Previous Post Next Post