Minimal Clean Presentation Library For Web – make-slides

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
});