Documentation

You can pass plugin options using data-options attribute. Please make sure to use valid json code.

Code Example

<div class="stepper sw-main sw-theme-circles"
   data-options='{
   "useURLhash":true,
   "theme":"sw-theme-circles",
   "transitionEffect":"fade",
   "toolbarSettings":{
   "showNextButton":false,
   "showPreviousButton":false
   }
   }'>
   <ul class="nav step-anchor">
      <li><a  class="circle" href="#step-1">1</a></li>
      <li><a  class="circle"  href="#step-2">2</a></li>
      <li><a  class="circle" href="#step-3">3</a></li>
      <li><a  class="circle"  href="#step-4">4</a></li>
   </ul>
   <div class="card no-b  shadow">
      <div id="step-1" class="card-body text-center p-5">
         <h3 class="my-3">
            Step 1
         </h3>
         <a href="#step-2" class="btn btn-primary mb-3 btn-lg">Go To Next Step</a>
      </div>
      <div id="step-2" class="card-body text-center p-5">
         <h3 class="my-3">
            Step 2
         </h3>
         <a href="#step-3" class="btn btn-primary mb-3 btn-lg">Go To Next Step</a>
      </div>
      <div id="step-3" class="card-body text-center p-5">
         <h3 class="my-3">
            Step 3
         </h3>
         <a href="#step-4" class="btn btn-primary mb-3 btn-lg">Go To Next Step</a>
      </div>
      <div id="step-4" class="card-body text-center p-5">
         <h3 class="my-3">
            Step 4
         </h3>
         <a href="#step-1" class="btn btn-primary mb-3 btn-lg">Go To Next Step</a>
      </div>
   </div>
</div>