Slider-style Guided Tour In Vanilla JavaScript – tourguide.js

Category: Javascript , Recommended | May 20, 2019
Author: LikaloLLC
Views Total: 190
Official Page: Go to website
Last Update: May 20, 2019
License: MIT

Preview:

Slider-style Guided Tour In Vanilla JavaScript – tourguide.js

Description:

tourguide.js is a JavaScript library which helps you create an interactive, step-by-step tour to guide your visitor through new features and highlighted content on the app.

Click the arrow button to advance to the next step of the tour. Click the pagination bullets to go to the specific step of the tour.

More features:

  • Smooth scrolls the page to the current step.
  • Auto scrolls the page to the original position when the tour is finished.
  • Allows you to load steps from an external data source.
  • Image preload.
  • Compatible with vanilla JavaScript, Angular, React and Vue.js.
  • Lots of options, methods, events.

How to use it:

To get started, insert the stylesheet tourguide.css and JavaScript tourguide.js into the document.

<link rel="stylesheet" href="tourguide.css">
<script src="tourguide.min.js"></script>

Initialize the tourguide.js and create a new tour instance.

var myTour = new Tourguide();

Define steps in the data-tour attribute.  Available properties:

  • step: step index
  • title: step title
  • content: step content
  • image: step image (optional)
  • actiontarget: action target (optional)
<h1 data-tour="step: 1; title: Page Title; image: 1.jpg; content: This is page title">Tour example</h1>

Start the tour and done.

myTour.start();

You can also config the tourguide.js to load step data from a JSON file.

// data.json
[
  {
    "selector": "Select 1",
    "step": 1,
    "title": "Step 1",
    "content": "Step 1 content",
    "image": "1.jpg"
  },
  {
    "selector": "Select 2",
    "step": 2,
    "title": "Step 2",
    "content": "Step 2 content",
    "image": "2.jpg"
  },
  {
    "selector": "Select 3",
    "step": 3,
    "title": "Step 3",
    "content": "Step 3 content",
    "image": "3.jpg"
  }
  // ... 
]
var myTour = new Tourguide({
    src: "/path/to/json.json"
});

// or
var steps= []
var myTour = new Tourguide({
    steps: steps
});

All possible options with default values.

var myTour = new Tourguide({
    root: "body",
    selector: "[data-tour]",
    animationspeed: 300,
    padding: 5,
    steps: null,
    src: null,
    restoreinitialposition: true,
    preloadimages: false,
    request: {
      "options": {
        "mode": "cors",
        "cache": "no-cache"
      },
      "headers": {
        "Content-Type": "application/json"
      }
    },
});

Callback functions.

var myTour = new Tourguide({
    onStart: function(options){...},
    onStop: function(options){...},
    onComplete: function(){...},
    onStep: function(currentstep, type){...},
    onAction: function(currentstep, e){...}
});

API methods.

// starts the tour
myTour.start();
myTour.start(2); // starts at step 2

// stops the tour
myTour.stop();

// goes to the next step
myTour.next();

// backs to the previous step
myTour.previous();

// goes to a specific step
myTour.go(2);

You Might Be Interested In:


Leave a Reply