Small & Beautiful Guided Tours In jQuery - introJS

introJS is a small (~1kb minified) jQuery guided tour plugin which can be used to introduce new features with a step-by-step guide for your web app.

How to use it:

1. Load the introJS plugin's script intro.min.js after loading jQuery.

<script src="https://code.jquery.com/jquery-3.4.0.min.js" 
        integrity="sha384-JUMjoW8OzDJw4oFpWIB2Bu/c6768ObEthBMVSiIx4ruBIEdyNSUQAjJNFqT5pnJ6" 
        crossorigin="anonymous">
</script>
<script src="intro.js"></script>

2. Create an array of JS objects containging elements and introductions.

const myTour = [{
      "class":"masthead-brand",
      "msg":"Logo Here"
      },{
      "class":"active",
      "msg":"Navigation Here"
      },{
      "class":"cover-heading",
      "msg":"Page Title Here"
      },{
      "class":"btn-lg",
      "msg":"Description Here"
}]

3. Initialize the introJS and the plugin will do the rest. Possible parameters.

• myjsonarr: JSON array
• nextbtnclassname: CSS class for the next button
• closebtnclassname: CSS class for the close button
• enableScroll: enables page scroll

// initiateIntro(myjsonarr,nextbtnclassname,closebtnclassname,enableScroll)
initiateIntro(myTour,'','',true);

---

This awesome jQuery plugin is developed by iamdshri. For more Advanced Usages, please check the demo page or visit the official website.