Skip to content

Repository files navigation

* slide tutorial
[[http://abcnews.go.com/images/Business/ht_slide_tester_1_dm_130425_wblog.jpg]]


*** Setup:

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

#+begin_src javascript
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'}
]});
#+end_src

Call the start method when you want it to open

#+begin_src javascript
slideTutorial.start()
#+end_src

*** 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.

#+begin_src javascript
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
});
#+end_src

*** Example:

#+begin_src
npm run build && open ./example/custom.html
#+end_src

About

No description, website, or topics provided.

Resources

Stars

1 star

Watchers

1 watching

Forks

Releases

Packages

Used by

Contributors

Languages