# jQuery Smart Wizard v6 ### The awesome step wizard plugin for jQuery [![Build Status](https://travis-ci.org/techlab/jquery-smartwizard.svg?branch=master)](https://travis-ci.org/techlab/jquery-smartwizard) [![npm version](https://badge.fury.io/js/smartwizard.svg)](https://www.npmjs.com/package/smartwizard) [![jsDelivr Hits](https://data.jsdelivr.com/v1/package/npm/smartwizard/badge?style=rounded)](https://www.jsdelivr.com/package/npm/smartwizard) [![Npm Downloadsl](https://badgen.net/npm/dm/smartwizard?icon=npm)](https://www.npmjs.com/package/smartwizard) [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/techlab/jquery-smartwizard/master/LICENSE) [![GitHub Repo](https://badgen.net/badge/icon/jquery-smartwizard?icon=github&label=&color=0da4d3)](https://github.com/techlab/jquery-smartwizard) [![GitHub Sponsor](https://img.shields.io/badge/Sponsor-techlab-blue.svg?logo=github)](https://github.com/sponsors/techlab) [![Donate on Paypal](https://img.shields.io/badge/PayPal-dipuraj-blue.svg)](https://www.paypal.me/dipuraj) **jQuery Smart Wizard** is an accessible step wizard plugin for jQuery. Provides a neat, usable and stylish user interface for your forms, checkout screen, registration process, etc. Easy to implement, Bootstrap compatiblity, customizable toolbars, themes and colors, events and Ajax support are few of the features. + [Homepage](https://techlaboratory.net/jquery-smartwizard) + [Documentation](https://techlaboratory.net/jquery-smartwizard#documentation) + [Demos](https://techlaboratory.net/jquery-smartwizard#demo) + [StackOverflow Q&A](https://stackoverflow.com/questions/tagged/smart-wizard) + [GitHub Issues](https://github.com/techlab/jquery-smartwizard/issues) Demos ----- + [Basic Example](https://techlaboratory.net/projects/demo/jquery-smart-wizard/v6) + [Form Validation Example](https://techlaboratory.net/projects/demo/jquery-smart-wizard/v6/validation) + [Ajax Content Example](https://techlaboratory.net/projects/demo/jquery-smart-wizard/v6/ajax) + [Multiple Wizard Example](https://techlaboratory.net/projects/demo/jquery-smart-wizard/v6/multiple) + [Bootstrap Modal Example](https://techlaboratory.net/projects/demo/jquery-smart-wizard/v6/bootstrap-modal) + [RTL (Right-to-left Language) Example](https://techlaboratory.net/projects/demo/jquery-smart-wizard/v6/rtl) Screenshots ----- ![Smart Wizard Demo](https://techlaboratory.net/assets/media/jquery-smart-wizard/v6/gif/sw-6-validation.gif) ![Smart Wizard Demo](https://techlaboratory.net/assets/media/jquery-smart-wizard/v6/gif/sw-6-basic-green.gif) ![Smart Wizard Arrows Dark](https://techlaboratory.net/assets/media/jquery-smart-wizard/v6/sw-6-arrows-dark.png) ![Smart Wizard Round](https://techlaboratory.net/assets/media/jquery-smart-wizard/v6/sw-6-round-lite-blue.png) ![Smart Wizard Dots](https://techlaboratory.net/assets/media/jquery-smart-wizard/v6/sw-6-dots-red.png) Requirements ----- + [jQuery](https://jquery.com/) Installation ----- ### [NPM](https://www.npmjs.com/package/smartwizard) npm install smartwizard ### [Yarn](https://yarn.pm/smartwizard) yarn add smartwizard ### [CDN - jsDelivr](https://www.jsdelivr.com/package/npm/smartwizard) ```html ``` ### [CDN - UNPKG](https://unpkg.com/browse/smartwizard/) ```html ``` ### Common JS/Webpack ```js var $ = require( "jquery" ); require( "smartwizard/dist/css/smart_wizard_all.css"); const smartWizard = require("smartwizard"); $(function() { $('#smartwizard').smartWizard(); }); ``` ### ES6/Babel ```js import $ from "jquery"; import "smartwizard/dist/css/smart_wizard_all.css"; import smartWizard from 'smartwizard'; $(function() { $('#smartwizard').smartWizard(); }); ``` #### Note: you may have to install the required dependencies ```bash npm i jquery npm i smartwizard // If you are using Webpack, install npm i webpack webpack-cli style-loader css-loader --save-dev ``` ### Download #### [Download from GitHub](https://github.com/techlab/jquery-smartwizard/archive/master.zip) Features ----- - Easy to implement and minimal HTML required - Supports all modern browsers - Responsive CSS design - Bootstrap compatible - Cool themes included and can be easly customize - Easy color cusomization using CSS variables - Built-in transition animations (none|fade|slideHorizontal|slideVertical|slideSwing|css) - Transition animations can be added easly by extending - CSS Animations support for transition animations (Supports [Animate.css](https://animate.style/)) - Form validation support - RTL(Right-to-left language) support - Accessible controls - External controls support - Easy ajax content integration - Keyboard navigation - Auto content height adjustment - Customizable toolbar and option to provide extra HTML - Buit-in progressbar - Buit-in loader - Buit-in events - UMD (Universal Module Definition) support - Compatible with all jQuery versions (jQuery 1.11.1+, jQuery 3.6+, and jQuery Slim) Usage ----- Include SmartWizard CSS ```html ``` Include HTML (*This is the basic HTML markup for the Smart Wizard. You can customize it by adding your on steps content*). ```html