Create Attractive Guided Tours On The Page - jQuery Interactive.js

Interactive.js is a jQuery plugin for creating dynamic, automatic, interactive guided tours of various elements through your web app.

The plugin will automatically go through the steps at a certain speed. Click on the webpage to manually go to the next step.

Compatible with Bootstrap framework. The plugin also has the ability to smooth scroll the page to the current element when the tour is activated.

See also:

• 10 Best Tour jQuery Plugins Of 2019

How to use it:

1. Insert the JavaScript file interactive.js after loading jQuery JavaScript library.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="interactive.js"></script>

2. The example JavaScript to define the steps for the guided tour.

$('.element-1').interactive({
  size: 50,
  textPosition:{
    bottom:'100px'
  },
  text:'Step 1',
  author:'jQueryScript'
})
.then(function(){
  return $('.element-2').interactive({
    size:100,
    textPosition:{
      bottom:'100px'
    },
    text:'Step 2',
    author:'jQueryScript'
  })
})
.then(function(){
  return $('.element-3').interactive({
    size:100,
    textPosition:{
      bottom:'100px'
    },
    text:'Step 3',
    author:'jQueryScript'
  })
})

---

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