slide-tutorial
v0.1.0
Published
click through slides of images & text in a fullscreen modal window
Downloads
12
Readme
- 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