Author: | Arish-Shah |
---|---|
Views Total: | 291 views |
Official Page: | Go to website |
Last Update: | September 17, 2019 |
License: | MIT |
Preview:

Description:
The make-slides JavaScript library transforms a group of content sections into a responsive, minimal, pretty clean presentation (full page slider) with navigation arrows and bottom progress bar.
How to use it:
Insert sectioned content into the document.
<div class="make-slides"> <section>Slide 1</section> <section>Slide 2</section> <section>Slide 3</section> ... </div>
Download and insert the make-slides.js script into the document.
<script src="./js/make-slides.js"></script>
Initialize the library and done.
makeSlides.init();
Specify the background color of the presentation.
makeSlides.init({ bgColor: '#121d23' });
You can also specify the background color for each slide using the data-bg
attribute.
<div class="make-slides"> <section data-bg="#000">Slide 1</section> <section data-bg="#222">Slide 2</section> <section data-bg="#333">Slide 3</section> ... </div>
Customize the transition effect.
makeSlides.init({ animationDuration: 100, transition: null });
Decide whether to show a progress bar that indicates on which slide you’re viewing. Default: true.
makeSlides.init({ progressBar: true });
Decide whether to show navigation arrows. Default: true.
makeSlides.init({ controls: true });