<head>
  <link href="https://cdn.jsdelivr.net/npm/smartwizard@5/dist/css/smart_wizard_all.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <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 content
         </div>
         <div id="step-2" class="tab-pane" role="tabpanel">
            Step content
         </div>
         <div id="step-3" class="tab-pane" role="tabpanel">
            Step content
         </div>
         <div id="step-4" class="tab-pane" role="tabpanel">
            Step content
         </div>
      </div>
  </div>
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/smartwizard@5/dist/js/jquery.smartWizard.min.js" type="text/javascript"></script>
</body>
$(document).ready(function(){
  // SmartWizard 初始化
  $('#smartwizard').smartWizard({
    selected: 0, // 開始位置，最小為 0
    theme: 'default', // 決定 CSS 主題，請記得引入相關 CSS 
    autoAdjustHeight: true, // 自動調整高度
    backButtonSupport: true, // 後退一步功能啟用
  transition: {
      animation: 'none', // none/fade/slide-horizontal/slide-vertical/slide-swing
      speed: '400', // Transion animation speed
  },
  toolbarSettings: { // 按鈕相關
      toolbarPosition: 'bottom', // none, top, bottom, both
      toolbarButtonPosition: 'right', // left, right, center
      showNextButton: true, // show/hide a Next button
      showPreviousButton: true, // show/hide a Previous button
      toolbarExtraButtons: [] // Extra buttons to show on toolbar, array of jQuery input/buttons elements
  }
  });
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.