### Install Dependencies for Smart Wizard

Source: https://github.com/techlab/jquery-smartwizard/blob/master/README.md

Provides commands to install the necessary dependencies, jQuery and smartwizard, using npm. Additional commands are included for installing Webpack-related packages if you are using Webpack.

```bash
npm i jquery
npm i smartwizard

// If you are using Webpack, install
npm i webpack webpack-cli style-loader css-loader --save-dev
```

--------------------------------

### Initialize jQuery SmartWizard with Arrows Theme and SlideVertical Transition

Source: https://github.com/techlab/jquery-smartwizard/blob/master/examples/multiple.html

Initializes the second SmartWizard instance using the 'arrows' theme and a 'slideVertical' transition effect. Similar to the first wizard, it enables navigation buttons and provides custom 'Complete' and 'Cancel' actions.

```javascript
function onFinish(){ alert('Finish Clicked'); }
function onCancel(elm){ elm.smartWizard("reset"); }
$(function() {
  // Smart Wizard 2
  $('#smartwizard2').smartWizard({
    selected: 0,
    theme: 'arrows',
    transition: {
      animation:'slideVertical'
    },
    toolbar: {
      showNextButton: true,
      showPreviousButton: true,
      position: 'both',
      extraHtml: `<button class="btn btn-success" onclick="onFinish()">Complete</button> <button class="btn btn-secondary" onclick="onCancel($('#smartwizard2'))">Cancel</button>`
    }
  });
});
```

--------------------------------

### Install Smart Wizard using NPM or Yarn

Source: https://context7.com/techlab/jquery-smartwizard/llms.txt

Installs the Smart Wizard plugin using either the NPM or Yarn package managers. This is the recommended method for integrating the plugin into your project.

```bash
# Using NPM
npm install smartwizard

# Using Yarn
yarn add smartwizard
```

--------------------------------

### Initialize jQuery SmartWizard with Round Theme and Fade Transition

Source: https://github.com/techlab/jquery-smartwizard/blob/master/examples/multiple.html

Initializes the first SmartWizard instance with a 'round' theme and 'fade' transition animation. It configures the toolbar to show both next and previous buttons, and includes custom 'Finish' and 'Cancel' buttons with associated JavaScript functions.

```javascript
function onFinish(){ alert('Finish Clicked'); }
function onCancel(elm){ elm.smartWizard("reset"); }
$(function() {
  // Smart Wizard 1
  $('#smartwizard1').smartWizard({
    selected: 0,
    theme: 'round',
    transition: {
      animation:'fade'
    },
    toolbar: {
      showNextButton: true,
      showPreviousButton: true,
      position: 'both',
      extraHtml: `<button class="btn btn-success" onclick="onFinish()">Finish</button> <button class="btn btn-secondary" onclick="onCancel($('#smartwizard1'))">Cancel</button>`
    }
  });
});
```

--------------------------------

### Install jQuery Smart Wizard via CDN

Source: https://github.com/techlab/jquery-smartwizard/blob/master/README.md

Includes HTML snippets for including the Smart Wizard CSS and JavaScript files from jsDelivr and UNPKG CDNs. These are essential for the plugin to function correctly on a webpage.

```html
<!-- CSS -->
<link href="https://cdn.jsdelivr.net/npm/smartwizard@6/dist/css/smart_wizard_all.min.css" rel="stylesheet" type="text/css" />

<!-- JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/smartwizard@6/dist/js/jquery.smartWizard.min.js" type="text/javascript"></script>
```

```html
<!-- CSS -->
<link href="https://unpkg.com/smartwizard@6/dist/css/smart_wizard_all.min.css" rel="stylesheet" type="text/css" />

<!-- JavaScript -->
<script src="https://unpkg.com/smartwizard@6/dist/js/jquery.smartWizard.min.js" type="text/javascript"></script>
```

--------------------------------

### Handle Wizard Initialization and Loading Events

Source: https://context7.com/techlab/jquery-smartwizard/llms.txt

The `initialized` event fires once when the SmartWizard plugin is first set up. The `loaded` event fires after the initial step has been fully displayed, indicating the wizard is ready for interaction. Both are useful for setup tasks.

```javascript
// Fires once during plugin initialization
$("#smartwizard").on("initialized", function(e) {
    console.log("Smart Wizard initialized");
});

// Fires after initial step is loaded and displayed
$("#smartwizard").on("loaded", function(e) {
    console.log("Smart Wizard loaded and ready");
    // Safe to interact with wizard here
});
```

--------------------------------

### Complete Form Validation Example with jQuery SmartWizard

Source: https://context7.com/techlab/jquery-smartwizard/llms.txt

Provides a full implementation of a multi-step form using jQuery SmartWizard, including validation on step leave, state management for errors, and handling form submission and cancellation. It utilizes HTML5 form validation and custom JavaScript functions.

```javascript
$(function() {
    // Initialize wizard
    $('#smartwizard').smartWizard({
        selected: 0,
        theme: 'arrows',
        transition: { animation: 'none' },
        toolbar: {
            position: 'bottom',
            extraHtml: `
                <button class="btn btn-success" id="btnFinish" disabled onclick="onConfirm()">Complete Order</button>
                <button class="btn btn-danger" onclick="onCancel()">Cancel</button>
            `
        },
        anchor: {
            enableDoneState: true,
            unDoneOnBackNavigation: true
        }
    });

    // Validation on step leave
    $("#smartwizard").on("leaveStep", function(e, anchorObject, currentStepIdx, nextStepIdx, stepDirection) {
        if (stepDirection == 'forward') {
            let form = document.getElementById('form-' + (currentStepIdx + 1));
            if (form && !form.checkValidity()) {
                form.classList.add('was-validated');
                $('#smartwizard').smartWizard("setState", [currentStepIdx], 'error');
                $('#smartwizard').smartWizard("fixHeight");
                return false;
            }
            $('#smartwizard').smartWizard("unsetState", [currentStepIdx], 'error');
        }
        return true;
    });

    // Update UI on step show
    $("#smartwizard").on("showStep", function(e, anchorObject, stepIndex, stepDirection, stepPosition) {
        $("#btnFinish").prop('disabled', stepPosition !== 'last');
        if (stepPosition === 'last') {
            showOrderSummary();
        }
    });
});

function onConfirm() {
    let form = document.getElementById('form-4');
    if (form && !form.checkValidity()) {
        form.classList.add('was-validated');
        $('#smartwizard').smartWizard("setState", [3], 'error');
        $('#smartwizard').smartWizard("fixHeight");
        return false;
    }
    $('#smartwizard').smartWizard("unsetState", [3], 'error');
    alert('Order placed successfully!');
}

function onCancel() {
    $('#smartwizard').smartWizard("reset");
    ['form-1', 'form-2', 'form-3', 'form-4'].forEach(function(id) {
        var form = document.getElementById(id);
        if (form) {
            form.reset();
            form.classList.remove('was-validated');
        }
    });
}
```

--------------------------------

### Manage Step States (setState, unsetState)

Source: https://context7.com/techlab/jquery-smartwizard/llms.txt

The `setState()` and `unsetState()` methods allow for dynamic manipulation of visual states on specific wizard steps. Available states include `default`, `active`, `done`, `disable`, `hidden`, `error`, and `warning`. This is useful for form validation and guiding user interaction.

```javascript
// Set error state on step 2 (0-indexed as 1)
$('#smartwizard').smartWizard("setState", [1], 'error');

// Set warning state on multiple steps
$('#smartwizard').smartWizard("setState", [2, 3], 'warning');

// Remove error state from step 2
$('#smartwizard').smartWizard("unsetState", [1], 'error');

// Disable specific steps
$('#smartwizard').smartWizard("setState", [3], 'disable');

// Hide a step
$('#smartwizard').smartWizard("setState", [2], 'hidden');

// Form validation with state management
$("#smartwizard").on("leaveStep", function(e, anchorObject, currentStepIdx, nextStepIdx, stepDirection) {
    if (stepDirection == 'forward') {
        let form = document.getElementById('form-' + (currentStepIdx + 1));
        if (form && !form.checkValidity()) {
            form.classList.add('was-validated');
            $('#smartwizard').smartWizard("setState", [currentStepIdx], 'error');
            return false; // Prevent navigation
        }
        $('#smartwizard').smartWizard("unsetState", [currentStepIdx], 'error');
    }
    return true;
});
```

--------------------------------

### Configure jQuery SmartWizard with All Options

Source: https://github.com/techlab/jquery-smartwizard/blob/master/README.md

This JavaScript snippet demonstrates how to initialize the jQuery SmartWizard plugin with all available configuration options. It covers settings for step selection, theming, navigation, animations, toolbar, anchor navigation, keyboard controls, language, and step states. Ensure jQuery and the SmartWizard plugin are included before this script.

```javascript
 $('#smartwizard').smartWizard({
  selected: 0, // Initial selected step, 0 = first step
  theme: 'basic', // theme for the wizard, related css need to include for other than basic theme
  justified: true, // Nav menu justification. true/false
  autoAdjustHeight: true, // Automatically adjust content height
  backButtonSupport: true, // Enable the back button support
  enableUrlHash: true, // Enable selection of the step based on url hash
  transition: {
      animation: 'none', // Animation effect on navigation, none|fade|slideHorizontal|slideVertical|slideSwing|css(Animation CSS class also need to specify)
      speed: '400', // Animation speed. Not used if animation is 'css'
      easing: '', // Animation easing. Not supported without a jQuery easing plugin. Not used if animation is 'css'
      prefixCss: '', // Only used if animation is 'css'. Animation CSS prefix
      fwdShowCss: '', // Only used if animation is 'css'. Step show Animation CSS on forward direction
      fwdHideCss: '', // Only used if animation is 'css'. Step hide Animation CSS on forward direction
      bckShowCss: '', // Only used if animation is 'css'. Step show Animation CSS on backward direction
      bckHideCss: '', // Only used if animation is 'css'. Step hide Animation CSS on backward direction
  },
  toolbar: {
      position: 'bottom', // none|top|bottom|both
      showNextButton: true, // show/hide a Next button
      showPreviousButton: true, // show/hide a Previous button
      extraHtml: '' // Extra html to show on toolbar
  },
  anchor: {
      enableNavigation: true, // Enable/Disable anchor navigation 
      enableNavigationAlways: false, // Activates all anchors clickable always
      enableDoneState: true, // Add done state on visited steps
      markPreviousStepsAsDone: true, // When a step selected by url hash, all previous steps are marked done
      unDoneOnBackNavigation: false, // While navigate back, done state will be cleared
      enableDoneStateNavigation: true // Enable/Disable the done state navigation
  },
  keyboard: {
      keyNavigation: true, // Enable/Disable keyboard navigation(left and right keys are used if enabled)
      keyLeft: [37], // Left key code
      keyRight: [39] // Right key code
  },
  lang: { // Language variables for button
      next: 'Next',
      previous: 'Previous'
  },
  disabledSteps: [], // Array Steps disabled
  errorSteps: [], // Array Steps error
  warningSteps: [], // Array Steps warning
  hiddenSteps: [], // Hidden steps
  getContent: null // Callback function for content loading
});
```

--------------------------------

### jQuery SmartWizard Initialization and Options

Source: https://github.com/techlab/jquery-smartwizard/blob/master/README.md

This section details how to initialize the SmartWizard plugin and provides a comprehensive list of configuration options for customizing its behavior and appearance.

```APIDOC
## Initialize SmartWizard with Options

### Description
Initializes the SmartWizard plugin on a target element and configures its behavior using a set of options.

### Method
JavaScript (jQuery Plugin)

### Endpoint
N/A (Client-side JavaScript)

### Parameters
#### Initialization Options
- **selected** (number) - Optional - Initial selected step, 0 = first step.
- **theme** (string) - Optional - Theme for the wizard. Requires corresponding CSS.
- **justified** (boolean) - Optional - Nav menu justification.
- **autoAdjustHeight** (boolean) - Optional - Automatically adjust content height.
- **backButtonSupport** (boolean) - Optional - Enable the back button support.
- **enableUrlHash** (boolean) - Optional - Enable selection of the step based on URL hash.
- **transition** (object) - Optional - Animation effect on navigation.
  - **animation** (string) - Optional - Animation effect: 'none', 'fade', 'slideHorizontal', 'slideVertical', 'slideSwing', 'css'.
  - **speed** (string) - Optional - Animation speed (in ms). Not used if animation is 'css'.
  - **easing** (string) - Optional - Animation easing. Requires a jQuery easing plugin.
  - **prefixCss** (string) - Optional - CSS prefix for 'css' animation.
  - **fwdShowCss** (string) - Optional - Step show CSS animation on forward direction.
  - **fwdHideCss** (string) - Optional - Step hide CSS animation on forward direction.
  - **bckShowCss** (string) - Optional - Step show CSS animation on backward direction.
  - **bckHideCss** (string) - Optional - Step hide CSS animation on backward direction.
- **toolbar** (object) - Optional - Toolbar configuration.
  - **position** (string) - Optional - Toolbar position: 'none', 'top', 'bottom', 'both'.
  - **showNextButton** (boolean) - Optional - Show/hide the Next button.
  - **showPreviousButton** (boolean) - Optional - Show/hide the Previous button.
  - **extraHtml** (string) - Optional - Extra HTML to show in the toolbar.
- **anchor** (object) - Optional - Anchor navigation configuration.
  - **enableNavigation** (boolean) - Optional - Enable/Disable anchor navigation.
  - **enableNavigationAlways** (boolean) - Optional - Make all anchors clickable always.
  - **enableDoneState** (boolean) - Optional - Add done state to visited steps.
  - **markPreviousStepsAsDone** (boolean) - Optional - Mark previous steps as done when a step is selected by URL hash.
  - **unDoneOnBackNavigation** (boolean) - Optional - Clear done state when navigating back.
  - **enableDoneStateNavigation** (boolean) - Optional - Enable/Disable navigation using done state.
- **keyboard** (object) - Optional - Keyboard navigation configuration.
  - **keyNavigation** (boolean) - Optional - Enable/Disable keyboard navigation (left/right keys).
  - **keyLeft** (array) - Optional - Array of key codes for the left arrow key.
  - **keyRight** (array) - Optional - Array of key codes for the right arrow key.
- **lang** (object) - Optional - Language variables for buttons.
  - **next** (string) - Optional - Text for the Next button.
  - **previous** (string) - Optional - Text for the Previous button.
- **disabledSteps** (array) - Optional - Array of step indices that are disabled.
- **errorSteps** (array) - Optional - Array of step indices that have errors.
- **warningSteps** (array) - Optional - Array of step indices that have warnings.
- **hiddenSteps** (array) - Optional - Array of step indices that are hidden.
- **getContent** (function) - Optional - Callback function for content loading.

### Request Example
```javascript
$('#smartwizard').smartWizard({
  selected: 0, 
  theme: 'basic', 
  justified: true, 
  autoAdjustHeight: true, 
  backButtonSupport: true, 
  enableUrlHash: true, 
  transition: {
      animation: 'none',
      speed: '400'
  },
  toolbar: {
      position: 'bottom',
      showNextButton: true,
      showPreviousButton: true
  },
  anchor: {
      enableNavigation: true,
      enableNavigationAlways: false,
      enableDoneState: true,
      markPreviousStepsAsDone: true,
      unDoneOnBackNavigation: false,
      enableDoneStateNavigation: true
  },
  keyboard: {
      keyNavigation: true,
      keyLeft: [37],
      keyRight: [39]
  },
  lang: {
      next: 'Next',
      previous: 'Previous'
  },
  disabledSteps: [],
  errorSteps: [],
  warningSteps: [],
  hiddenSteps: [],
  getContent: null
});
```

### Response
N/A (This is a client-side initialization)

#### Success Response (200)
N/A

#### Response Example
N/A
```

--------------------------------

### Retrieve Wizard Options and Step Info (getOptions, getStepInfo)

Source: https://context7.com/techlab/jquery-smartwizard/llms.txt

The `getOptions()` method returns an object containing the current configuration settings of the SmartWizard, while `getStepInfo()` provides details about the current step and the total number of steps. These methods are useful for inspecting the wizard's state and updating the UI accordingly.

```javascript
// Get all current options
var options = $('#smartwizard').smartWizard("getOptions");
console.log('Current theme:', options.theme);
console.log('Animation:', options.transition.animation);

// Get current step information
var stepInfo = $('#smartwizard').smartWizard("getStepInfo");
console.log('Current step:', stepInfo.currentStep);
console.log('Total steps:', stepInfo.totalSteps);

// Update UI with step info
$("#smartwizard").on("showStep", function(e, anchorObject, stepIndex, stepDirection, stepPosition) {
    let stepInfo = $('#smartwizard').smartWizard("getStepInfo");
    $("#sw-current-step").text(stepInfo.currentStep + 1);
    $("#sw-total-step").text(stepInfo.totalSteps);
});
```

--------------------------------

### getOptions() and getStepInfo()

Source: https://context7.com/techlab/jquery-smartwizard/llms.txt

Retrieves the current wizard configuration options and detailed information about the wizard's steps, including the current step and total number of steps.

```APIDOC
## getOptions() and getStepInfo()

### Description
Retrieves current wizard configuration and step information. `getOptions()` returns an object with all current settings, while `getStepInfo()` provides details about the current step and the total number of steps.

### Method
`jQuery.fn.smartWizard("getOptions")`
`jQuery.fn.smartWizard("getStepInfo")`

### Parameters
None

### Request Example
```javascript
// Get all current options
var options = $('#smartwizard').smartWizard("getOptions");
console.log('Current theme:', options.theme);
console.log('Animation:', options.transition.animation);

// Get current step information
var stepInfo = $('#smartwizard').smartWizard("getStepInfo");
console.log('Current step:', stepInfo.currentStep);
console.log('Total steps:', stepInfo.totalSteps);

// Update UI with step info
$("#smartwizard").on("showStep", function(e, anchorObject, stepIndex, stepDirection, stepPosition) {
    let stepInfo = $('#smartwizard').smartWizard("getStepInfo");
    $("#sw-current-step").text(stepInfo.currentStep + 1);
    $("#sw-total-step").text(stepInfo.totalSteps);
});
```

### Response
*   **getOptions()**: Returns an object containing the current wizard configuration options.
*   **getStepInfo()**: Returns an object with `currentStep` (number) and `totalSteps` (number).
```

--------------------------------

### Programmatically Navigate to a Specific Step

Source: https://context7.com/techlab/jquery-smartwizard/llms.txt

Demonstrates how to programmatically control the wizard's current step using the `goToStep` method. It supports optional forcing of navigation, bypassing restrictions and marking previous steps as done.

```javascript
// Navigate to step 3 (0-indexed)
$('#smartwizard').smartWizard("goToStep", 2);

// Force navigation to step 4, marking all previous steps as done
$('#smartwizard').smartWizard("goToStep", 3, true);

// Example: Go to step button implementation
$('#btn-go-to').on('click', function() {
    var stepNumber = parseInt($('#step-selector').val()) - 1;
    $('#smartwizard').smartWizard("goToStep", stepNumber);
});

// Force navigation example with confirmation
$('#btn-go-to-forced').on('click', function() {
    var stepNumber = parseInt($('#step-selector').val()) - 1;
    $('#smartwizard').smartWizard("goToStep", stepNumber, true);
});
```

--------------------------------

### setOptions(options)

Source: https://context7.com/techlab/jquery-smartwizard/llms.txt

Dynamically updates wizard configuration options after initialization. This is useful for changing themes, animations, or toolbar positions on the fly.

```APIDOC
## setOptions(options)

### Description
Dynamically updates wizard configuration options after initialization. This method allows for real-time adjustments to the wizard's appearance and behavior.

### Method
`jQuery.fn.smartWizard("setOptions", options)`

### Parameters
*   **options** (object) - Required - An object containing the options to update. Refer to the plugin's initialization options for available properties.

### Request Example
```javascript
// Change theme dynamically
$('#smartwizard').smartWizard("setOptions", {
    theme: 'dots'
});

// Update multiple options
$('#smartwizard').smartWizard("setOptions", {
    theme: 'round',
    justified: false,
    transition: {
        animation: 'slideHorizontal',
        speed: '300'
    },
    toolbar: {
        position: 'both'
    }
});

// Theme selector implementation
$('#theme_selector').on('change', function() {
    $('#smartwizard').smartWizard("setOptions", {
        theme: $(this).val()
    });
});

// Animation selector implementation
$('#animation').on('change', function() {
    $('#smartwizard').smartWizard("setOptions", {
        transition: {
            animation: $(this).val()
        }
    });
});
```

### Response
None
```

--------------------------------

### Basic Smart Wizard Initialization and HTML Structure

Source: https://context7.com/techlab/jquery-smartwizard/llms.txt

Demonstrates the fundamental HTML structure required for Smart Wizard and its basic JavaScript initialization. This includes the wizard container, navigation list, content panels, and optional progress bar.

```html
<!-- HTML Structure -->
<div id="smartwizard">
    <ul class="nav">
        <li class="nav-item">
            <a class="nav-link" href="#step-1">
                <span class="num">1</span>
                Step Title
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#step-2">
                <span class="num">2</span>
                Step Title
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#step-3">
                <span class="num">3</span>
                Step Title
            </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>

    <!-- Optional progress bar -->
    <div class="progress">
        <div class="progress-bar" role="progressbar" style="width: 0%"></div>
    </div>
</div>

<script>
$(function() {
    $('#smartwizard').smartWizard({
        selected: 0,
        theme: 'arrows',
        justified: true,
        autoAdjustHeight: true,
        backButtonSupport: true,
        enableUrlHash: true,
        transition: {
            animation: 'fade',
            speed: '400'
        },
        toolbar: {
            position: 'bottom',
            showNextButton: true,
            showPreviousButton: true,
            extraHtml: '<button class="btn btn-success" onclick="onFinish()">Finish</button>'
        },
        anchor: {
            enableNavigation: true,
            enableDoneState: true,
            markPreviousStepsAsDone: true
        }
    });
});
</script>
```

--------------------------------

### Initialize SmartWizard and Event Handlers

Source: https://github.com/techlab/jquery-smartwizard/blob/master/examples/validation.html

Initializes the SmartWizard plugin with various configurations such as theme, navigation, and toolbar options. It sets up event handlers for 'leaveStep' to validate forms, 'showStep' to manage button states and focus, and 'change' events for state and style selectors. These event handlers manage the form's behavior during navigation and user interaction.

```javascript
$(function() {
  // Leave step event is used for validating the forms
  $("#smartwizard").on("leaveStep", function(e, anchorObject, currentStepIdx, nextStepIdx, stepDirection) {
    // Validate only on forward movement
    if (stepDirection == 'forward') {
      let form = document.getElementById('form-' + (currentStepIdx + 1));
      if (form) {
        if (!form.checkValidity()) {
          form.classList.add('was-validated');
          $('#smartwizard').smartWizard("setState", [currentStepIdx], 'error');
          $("#smartwizard").smartWizard('fixHeight');
          return false;
        }
        $('#smartwizard').smartWizard("unsetState", [currentStepIdx], 'error');
      }
    }
  });

  // Step show event
  $("#smartwizard").on("showStep", function(e, anchorObject, stepIndex, stepDirection, stepPosition) {
    $("#prev-btn").removeClass('disabled').prop('disabled', false);
    $("#next-btn").removeClass('disabled').prop('disabled', false);
    if(stepPosition === 'first') {
      $("#prev-btn").addClass('disabled').prop('disabled', true);
    } else if(stepPosition === 'last') {
      $("#next-btn").addClass('disabled').prop('disabled', true);
    } else {
      $("#prev-btn").removeClass('disabled').prop('disabled', false);
      $("#next-btn").removeClass('disabled').prop('disabled', false);
    }

    // Get step info from Smart Wizard
    let stepInfo = $('#smartwizard').smartWizard("getStepInfo");
    $("#sw-current-step").text(stepInfo.currentStep + 1);
    $("#sw-total-step").text(stepInfo.totalSteps);

    if (stepPosition == 'last') {
      showConfirm();
      $("#btnFinish").prop('disabled', false);
    } else {
      $("#btnFinish").prop('disabled', true);
    }

    // Focus first name
    if (stepIndex == 1) {
      setTimeout(() => {
        $('#first-name').focus();
      }, 0);
    }
  });

  // Smart Wizard
  $('#smartwizard').smartWizard({
    selected: 0,
    // autoAdjustHeight: false,
    theme: 'arrows',
    // basic, arrows, square, round, dots
    transition: {
      animation:'none'
    },
    toolbar: {
      showNextButton: true, // show/hide a Next button
      showPreviousButton: true, // show/hide a Previous button
      position: 'bottom', // none/ top/ both bottom
      extraHtml: `<button class="btn btn-success" id="btnFinish" disabled onclick="onConfirm()">Complete Order</button> <button class="btn btn-danger" id="btnCancel" onclick="onCancel()">Cancel</button>`
    },
    anchor: {
      enableNavigation: true, // Enable/Disable anchor navigation
      enableNavigationAlways: false, // Activates all anchors clickable always
      enableDoneState: true, // Add done state on visited steps
      markPreviousStepsAsDone: true, // When a step selected by url hash, all previous steps are marked done
      unDoneOnBackNavigation: true, // While navigate back, done state will be cleared
      enableDoneStateNavigation: true // Enable/Disable the done state navigation
    },
  });

  $("#state_selector").on("change", function() {
    $('#smartwizard').smartWizard("setState", [$('#step_to_style').val()], $(this).val(), !$('#is_reset').prop("checked"));
    return true;
  });
  $("#style_selector").on("change", function() {
    $('#smartwizard').smartWizard("setStyle", [$('#step_to_style').val()], $(this).val(), !$('
```

--------------------------------

### Initialize jQuery SmartWizard and Handle Step Events

Source: https://github.com/techlab/jquery-smartwizard/blob/master/examples/bootstrap-modal.html

Initializes the SmartWizard with various configuration options such as theme, transition animations, and toolbar settings. It also includes event listeners for the 'showStep' event to manage navigation button states based on the current step position.

```javascript
function onFinish(){ alert('Finish Clicked'); }
function onCancel(){ $('#smartwizard').smartWizard("reset"); }
$(function() {
    // Step show event
    $("#smartwizard").on("showStep", function(e, anchorObject, stepIndex, stepDirection, stepPosition) {
        $("#prev-btn").removeClass('disabled').prop('disabled', false);
        $("#next-btn").removeClass('disabled').prop('disabled', false);
        if(stepPosition === 'first') {
            $("#prev-btn").addClass('disabled').prop('disabled', true);
        } else if(stepPosition === 'last') {
            $("#next-btn").addClass('disabled').prop('disabled', true);
        } else {
            $("#prev-btn").removeClass('disabled').prop('disabled', false);
            $("#next-btn").removeClass('disabled').prop('disabled', false);
        }
        // Get step info from Smart Wizard
        let stepInfo = $('#smartwizard').smartWizard("getStepInfo");
        $("#sw-current-step").text(stepInfo.currentStep + 1);
        $("#sw-total-step").text(stepInfo.totalSteps);
    });

    // Smart Wizard
    $('#smartwizard').smartWizard({
        selected: 0,
        // autoAdjustHeight: false,
        theme: 'arrows',
        // basic, arrows, square, round, dots
        transition: {
            animation:'none'
        },
        toolbar: {
            showNextButton: true,
            // show/hide a Next button
            showPreviousButton: true,
            // show/hide a Previous button
            position: 'none'
            // none/ top/ both bottom
        },
        anchor: {
            enableNavigation: true,
            // Enable/Disable anchor navigation
            enableNavigationAlways: false,
            // Activates all anchors clickable always
            enableDoneState: true,
            // Add done state on visited steps
            markPreviousStepsAsDone: true,
            // When a step selected by url hash, all previous steps are marked done
            unDoneOnBackNavigation: false,
            // While navigate back, done state will be cleared
            enableDoneStateNavigation: true
            // Enable/Disable the done state navigation
        },
        disabledSteps: [],
        // Array Steps disabled
        errorSteps: [],
        // Highlight step with errors
        hiddenSteps: []
    });

    $("#prev-btn-modal").on("click", function() {
        // Navigate previous
        $('#smartwizard').smartWizard("prev");
        return true;
    });

    $("#next-btn-modal").on("click", function() {
        // Navigate next
        $('#smartwizard').smartWizard("next");
        return true;
    });

    $("#state_selector").on("change", function() {
        $('#smartwizard').smartWizard("setState", [$('#step_to_style').val()], $(this).val(), !$('#is_reset').prop("checked"));
        return true;
    });

    $("#style_selector").on("change", function() {
        $('#smartwizard').smartWizard("setStyle", [$('#step_to_style').val()], $(this).val(), !$('#is_reset').prop("checked"));
        return true;
    });
});
```

--------------------------------

### Configure SmartWizard with Custom Events and Options

Source: https://github.com/techlab/jquery-smartwizard/blob/master/examples/index.html

This snippet initializes the SmartWizard plugin with various configuration options. It sets the initial selected step, theme, transition animation, and toolbar button visibility and position. Custom 'Finish' and 'Cancel' buttons are added to the toolbar, triggering specific JavaScript functions.

```javascript
function onFinish(){ alert('Finish Clicked'); }
function onCancel(){ $('#smartwizard').smartWizard("reset"); }
$(function() {
  // Step show event
  $("#smartwizard").on("showStep", function(e, anchorObject, stepIndex, stepDirection, stepPosition) {
    $("#prev-btn").removeClass('disabled').prop('disabled', false);
    $("#next-btn").removeClass('disabled').prop('disabled', false);
    if(stepPosition === 'first') {
      $("#prev-btn").addClass('disabled').prop('disabled', true);
    } else if(stepPosition === 'last') {
      $("#next-btn").addClass('disabled').prop('disabled', true);
    } else {
      $("#prev-btn").removeClass('disabled').prop('disabled', false);
      $("#next-btn").removeClass('disabled').prop('disabled', false);
    }
    // Get step info from Smart Wizard
    let stepInfo = $('#smartwizard').smartWizard("getStepInfo");
    $("#sw-current-step").text(stepInfo.currentStep + 1);
    $("#sw-total-step").text(stepInfo.totalSteps);
  });

  $("#smartwizard").on("initialized", function(e) {
    console.log("initialized");
  });

  $("#smartwizard").on("loaded", function(e) {
    console.log("loaded");
  });

  // Smart Wizard
  $('#smartwizard').smartWizard({
    selected: 0, // autoAdjustHeight: false,
    theme: 'arrows',
    transition: {
      animation:'myFade' // none|fade|slideHorizontal|slideVertical|slideSwing|css
    },
    toolbar: {
      showNextButton: true, // show/hide a Next button
      showPreviousButton: true, // show/hide a Previous button
      position: 'both', // none/ top/ both bottom
      extraHtml: `<button class="btn btn-success" onclick="onFinish()">Finish</button> <button class="btn btn-secondary" onclick="onCancel()">Cancel</button>`
    },
    anchor: {
      enableNavigation: true, // Enable/Disable anchor navigation
      enableNavigationAlways: false, // Activates all anchors clickable always
      enableDoneState: true, // Add done state on visited steps
      markPreviousStepsAsDone: true, // When a step selected by url hash, all previous steps are marked done
      unDoneOnBackNavigation: false, // While navigate back, done state will be cleared
      enableDoneStateNavigation: true // Enable/Disable the done state navigation
    },
    disabledSteps: [], // Array Steps disabled
    errorSteps: [], // Highlight step with errors
    hiddenSteps: [], // Hidden steps
    // getContent: (idx, stepDirection, selStep, callback) => {
    // console.log('getContent',selStep, idx, stepDirection);
    // callback('<h1>'+idx+'</h1>');
    // }
  });

  $.fn.smartWizard.transitions.myFade = (elmToShow, elmToHide, stepDirection, wizardObj, callback) => {
    if (!$.isFunction(elmToShow.fadeOut)) {
      callback(false);
      return;
    }
    if (elmToHide) {
      elmToHide.fadeOut(wizardObj.options.transition.speed, wizardObj.options.transition.easing, () => {
        elmToShow.fadeIn(wizardObj.options.transition.speed, wizardObj.options.transition.easing, () => {
          callback();
        });
      });
    } else {
      elmToShow.fadeIn(wizardObj.options.transition.speed, wizardObj.options.transition.easing, () => {
        callback();
      });
    }
  }

  $("#state_selector").on("change", function() {
    $('#smartwizard').smartWizard("setState", [$('#step_to_style').val()] , $(this).val(), !$('#is_reset').prop("checked"));
    return true;
  });

  $("#style_selector").on("change", function() {
    $('#smartwizard').smartWizard("setStyle", [$('#step_to_style').val()] , $(this).val(), !$('#is_reset').prop("checked"));
    return true;
  });
});
```

--------------------------------

### Initialize jQuery Smart Wizard with Common JS/Webpack

Source: https://github.com/techlab/jquery-smartwizard/blob/master/README.md

Demonstrates how to initialize the jQuery Smart Wizard plugin using CommonJS module syntax, typically used in Webpack configurations. It requires jQuery and the Smart Wizard CSS and JS modules.

```javascript
var $ = require( "jquery" );
require( "smartwizard/dist/css/smart_wizard_all.css");
const smartWizard = require("smartwizard");

$(function() {
    $('#smartwizard').smartWizard();
});
```

--------------------------------

### Custom Transition Animations with jQuery SmartWizard

Source: https://context7.com/techlab/jquery-smartwizard/llms.txt

Demonstrates how to define and use custom JavaScript-based transition animations for SmartWizard steps. It extends the `$.fn.smartWizard.transitions` object and requires jQuery. The animation speed is configurable via wizard options.

```javascript
$.fn.smartWizard.transitions.myFade = function(elmToShow, elmToHide, stepDirection, wizardObj, callback) {
    // elmToShow: jQuery element to show
    // elmToHide: jQuery element to hide (null on first load)
    // stepDirection: 'forward' or 'backward'
    // wizardObj: SmartWizard instance
    // callback: Must be called when animation completes

    if (!$.isFunction(elmToShow.fadeOut)) {
        callback(false); // Fallback to default if jQuery UI not available
        return;
    }

    if (elmToHide) {
        elmToHide.fadeOut(wizardObj.options.transition.speed, function() {
            elmToShow.fadeIn(wizardObj.options.transition.speed, function() {
                callback();
            });
        });
    } else {
        elmToShow.fadeIn(wizardObj.options.transition.speed, function() {
            callback();
        });
    }
};

// Use custom transition
$('#smartwizard').smartWizard({
    transition: {
        animation: 'myFade',
        speed: '400'
    }
});
```

--------------------------------

### jQuery Smart Wizard Initialization and Event Handling

Source: https://github.com/techlab/jquery-smartwizard/blob/master/examples/ajax.html

This JavaScript code initializes the jQuery Smart Wizard plugin with various configuration options. It also sets up event listeners for step changes to update navigation button states and display current step information. The code demonstrates how to customize the wizard's theme, transitions, toolbar, and anchor navigation.

```javascript
$(function() {
    // Step show event
    $("#smartwizard").on("showStep", function(e, anchorObject, stepIndex, stepDirection, stepPosition) {
        $("#prev-btn").removeClass('disabled').prop('disabled', false);
        $("#next-btn").removeClass('disabled').prop('disabled', false);
        if(stepPosition === 'first') {
            $("#prev-btn").addClass('disabled').prop('disabled', true);
        } else if(stepPosition === 'last') {
            $("#next-btn").addClass('disabled').prop('disabled', true);
        } else {
            $("#prev-btn").removeClass('disabled').prop('disabled', false);
            $("#next-btn").removeClass('disabled').prop('disabled', false);
        }
        // Get step info from Smart Wizard
        let stepInfo = $('#smartwizard').smartWizard("getStepInfo");
        $("#sw-current-step").text(stepInfo.currentStep + 1);
        $("#sw-total-step").text(stepInfo.totalSteps);
    });

    // Smart Wizard
    $('#smartwizard').smartWizard({
        selected: 0,
        theme: 'square',
        // basic, arrows, square, round, dots
        transition: {
            animation:'fade'
            // none|fade|slideHorizontal|slideVertical|slideSwing|css
        },
        toolbar: {
            showNextButton: true,
            // show/hide a Next button
            showPreviousButton: true,
            // show/hide a Previous button
            position: 'bottom',
            // none/ top/ both / bottom
            extraHtml: `<button class="btn btn-secondary" onclick="onCancel()">Cancel</button>`
        },
        anchor: {
            enableNavigation: true,
            // Enable/Disable anchor navigation
            enableNavigationAlways: false,
            // Activates all anchors clickable always
            enableDoneState: true,
            // Add done state on visited steps
            markPreviousStepsAsDone: true,
            // When a step selected by url hash, all previous steps are marked done
            unDoneOnBackNavigation: false,
            // While navigate back, done state will be cleared
            enableDoneStateNavigation: true
            // Enable/Disable the done state navigation
        },
        disabledSteps: [],
        // Array Steps disabled
        errorSteps: [],
        // Highlight step with errors
        hiddenSteps: []
        // Hidden steps
        // getContent: provideContent
    });

    $("#state_selector").on("change", function() {
        $('#smartwizard').smartWizard("setState", [$('#step_to_style').val()], $(this).val(), !$('#is_reset').prop("checked"));
        return true;
    });

    $("#style_selector").on("change", function() {
        $('#smartwizard').smartWizard("setStyle", [$('#step_to_style').val()], $(this).val(), !$('#is_reset').prop("checked"));
        return true;
    });
});
```

--------------------------------

### Load Step Content Dynamically with getContent Callback

Source: https://context7.com/techlab/jquery-smartwizard/llms.txt

The `getContent` callback option allows for dynamic loading of step content via Ajax. This function is called when a step needs to be rendered, and it should invoke the provided callback with the HTML content or an error message. It's particularly useful for fetching data based on the step.

```javascript
function provideContent(idx, stepDirection, stepPosition, selStep, callback) {
    // idx: Target step index
    // stepDirection: 'forward' or 'backward'
    // stepPosition: 'first', 'middle', or 'last'
    // selStep: jQuery object of the step anchor
    // callback: Function to call with content HTML

    // Only load ajax content on forward navigation for middle steps
    if (stepDirection == 'forward' && stepPosition == 'middle') {
        let repo = selStep.data('repo');
        let ajaxURL = "https://api.npms.io/v2/search?q=" + repo;

        $('#smartwizard').smartWizard("loader", "show");

        $.ajax({
            method: "GET",
            url: ajaxURL
        }).done(function(res) {
            let data = res.results[0];
            let html = `
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">${data.package.name}</h5>
                        <p class="card-text">${data.package.description}</p>
                    </div>
                </div>`;
            callback(html);
            $('#smartwizard').smartWizard("loader", "hide");
        }).fail(function(err) {
            callback("Error loading content");
            $('#smartwizard').smartWizard("loader", "hide");
        });
        return; // Important: return without calling callback again
    }

    callback(); // Call without content to use existing HTML
}

// Initialize with getContent callback
$('#smartwizard').smartWizard({
    selected: 0,
    theme: 'square',
    getContent: provideContent
});
```

--------------------------------

### CSS Animation Support with Animate.css in SmartWizard

Source: https://context7.com/techlab/jquery-smartwizard/llms.txt

Shows how to integrate CSS animations, specifically using the Animate.css library, for step transitions in SmartWizard. This method requires including the Animate.css stylesheet and configuring specific CSS classes for forward and backward transitions.

```html
<!-- Include Animate.css -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet" />

<script>
$('#smartwizard').smartWizard({
    transition: {
        animation: 'css',
        prefixCss: 'animate__animated',
        fwdShowCss: 'animate__fadeInRight',
        fwdHideCss: 'animate__fadeOutLeft',
        bckShowCss: 'animate__fadeInLeft',
        bckHideCss: 'animate__fadeOutRight'
    }
});
</script>
```

--------------------------------

### AJAX Content Loading with jQuery Smart Wizard

Source: https://github.com/techlab/jquery-smartwizard/blob/master/examples/ajax.html

This function demonstrates how to dynamically load content for a step in the Smart Wizard using AJAX. It fetches data from the NPMS API based on a repository name and formats the response into HTML. The function handles both successful responses and errors, updating the wizard accordingly.

```javascript
function provideContent(idx, stepDirection, stepPosition, selStep, callback) {
    // Only get ajax content on the forward movement
    if (stepDirection == 'forward' && stepPosition == 'middle') {
        let repo = selStep.data('repo');
        // let repo = "jquery-smartwizard";
        let ajaxURL = "https://api.npms.io/v2/search?q=" + repo;
        // Ajax call to fetch your content
        $.ajax({
            method : "GET",
            url : ajaxURL,
            beforeSend: function( xhr ) {
                // Show the loader
                $('#smartwizard').smartWizard("loader", "show");
            }
        }).done(function( res ) {
            let data = res.results[0];
            console.log(data);
            let keywordsHtml = '';
            data.package.keywords.forEach(keyword => keywordsHtml += `<span class="badge bg-secondary me-1">${keyword}</span>`);
            let popularity = parseInt(data.score.detail.popularity * 100);
            let quality = parseInt(data.score.detail.quality * 100);
            let maintenance = parseInt(data.score.detail.maintenance * 100);
            var html = `<div class="card w-100" >
                <div class="card-body">
                    <h5 class="card-title"><a href="${data.package.links.repository}">${data.package.name}</a> <span class="badge bg-secondary">${data.package.version}</span></h5>
                    <p class="card-text">${data.package.description}</p>
                    <p class="card-text"><small class="text-muted">Created by ${data.package.author.name}</small></p>
                </div>
                <ul class="list-group list-group-flush">
                    <li class="list-group-item"><a class="card-link" href="${data.package.links.homepage}">Homepage</a> <a class="card-link" href="${data.package.links.npm}">Npm</a> <a class="card-link" href="${data.package.links.bugs}">Bug</a> </li>
                    <li class="list-group-item">${keywordsHtml}</li>
                    <li class="list-group-item"> Popularity: <span class="badge bg-secondary me-1">${popularity}</span> Quality: <span class="badge bg-secondary me-1">${quality}</span> Maintenance: <span class="badge bg-secondary me-1">${maintenance}</span>
                    </li>
                </ul>
            </div>`;
            // Resolve the Promise with the tab content
            callback(html);
            // Hide the loader
            $('#smartwizard').smartWizard("loader", "hide");
        }).fail(function(err) {
            // Reject the Promise with error message to show as tab content
            callback( "An error loading the resource" );
            // Hide the loader
            $('#smartwizard').smartWizard("loader", "hide");
        });
    }
    callback();
}
```