tourguide.js is a javascript library that helps you create an interactive step-by-step tour to guide your visitor through the new features and featured content on the app.
More Features:
- The page scrolls smoothly to the current step.
- It automatically scrolls the page to the original position when the round ends.
- It allows you to download the steps from an external data source.
- Preload the image.
- Compliant with Vanilla JavaScript, Angular, React, and Vue.js.
- Lots of options, styles, and events.
Bootstrap Inspired Step-by-step Wizard Modal Plugin | jQuery FlowDialog
How to make use of it:
To get began, insert the stylesheet tourguide.css
and JavaScript tourguide.js
into the doc.
<link rel="stylesheet" href="tourguide.css"> <script src="tourguide.min.js"></script>
Initialize the tourguide.js and create a brand new tour instance.
var myTour = new Tourguide();
Define steps within the data-tour attribute.
<h1 data-tour="step: 1; title: Page Title; image: 1.jpg; content: This is page title">Tour example</h1>
Start the tour and finished.
myTour.start();
You may config the tourguide.js to load step information 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 potential choices 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 features.
var myTour = new Tourguide({ onStart: function(options){...}, onStop: function(options){...}, onComplete: function(){...}, onStep: function(currentstep, type){...}, onAction: function(currentstep, e){...} });
API strategies.
// 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);
Slider-style Guided Tour, Tourguide.js Plugin/Github
See Demo And Download
Official Website(LikaloLLC): Click Here
This superior jQuery/javascript plugin is developed by LikaloLLC. For extra Advanced Usages, please go to the official website.
Be First to Comment