Smart Wizard is a step wizard jquery plugin with Bootstrap 4 support. It is easy to implement and gives a neat and stylish interface for your forms, you can also use in checkout screen, registration steps etc. The step wizard active step by step indication with support in validation. There is lot of more features added with not limited with Bootstrap support, Bootstrap themes, customizable toolbars, customizable options, public methods, event support and a lot more.
Table of Contents
How to use :
Add the core stylesheet SmartWizard.css :
<!-- Main SmartWizard CSS -->
<link href="smart_wizard.min.css" rel="stylesheet">
<!-- Optional SmartWizard themes -->
<link href="smart_wizard_theme_circles.min.css" rel="stylesheet">
<link href="smart_wizard_theme_arrows.min.css" rel="stylesheet">
<link href="smart_wizard_theme_dots.min.css" rel="stylesheet">
Add jQuery library and the jQuery Smart Wizard plugin’s script :
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.smartWizard.min.js"></script>
Add basic HTML structure for the smart wizard :
<div id="smartwizard">
<ul>
<li><a href="#step-1">Step 1<br /><small>This is tab's description</small></a></li>
<li><a href="#step-2">Step 2<br /><small>This is tab's description</small></a></li>
<li><a href="#step-3">Step 3<br /><small>This is tab's description</small></a></li>
<li><a href="#step-4">Step 4<br /><small>This is tab's description</small></a></li>
</ul>
<div>
<div id="step-1" class="">
<h2>Step 1 Content</h2>
</div>
<div id="step-2" class="">
<h2>Step 2 Content</h2>
</div>
<div id="step-3" class="">
<h2>Step 3 Content</h2>
</div>
<div id="step-4" class="">
<h2>Step 4 Content</h2>
</div>
</div>
</div>
Initialize the smart wizard with default options :
$('#smartwizard').smartWizard();
Done
Thanks for make jQuery plugin is developed by techlab For more Helpfull for users, please check the demo page or visit the official website.
