slide tutorial

Setup:

Create a new SlideTutorial and pass in an object with a ‘slides’ array of objects. Objects should have ‘image’, ‘title’, and ‘content’ keys.

var slideTutorial = new SlideTutorial({slides: [
      {image: './your-image-1.jpg', title: 'Welcome', content: 'Some content'},
      {image: './your-image-2.jpg', title: 'Second Slide', content: 'Some more content'},
      {image: './your-image-3.jpg', title: 'Third Slide', content: 'Some more content'}
]});

Call the start method when you want it to open

slideTutorial.start()

Customize:

Pass in optional ‘nextButtonText’, ‘finishButtonText’, and ‘closeButtonText’ keys to the constructor to override the default text. These set the innerHTML directly, so feel free to pass in icons and other tags as well. ‘constantHeight can also be set to ensure slides are all the same height for variable content lengths.

var slideTutorial = new SlideTutorial({
  slides: [
      {image: './your-image-1.jpg', title: 'Welcome', content: 'Some content'},
      {image: './your-image-2.jpg', title: 'Second Slide', content: 'Some more content'},
      {image: './your-image-3.jpg', title: 'Third Slide', content: 'Some more content'}
  ], 
  nextButtonText: 'Continue', 
  finishButtonText: 'Get Started',
  closeButtonText: 'Exit',
  constantHeight: true
});

Example:

npm run build && open ./example/custom.html