Pure JavaScript Library For HTML5 Web Presentation – Present.js

Preview:

Description:

Present.js is a small, responsive and highly customizable JavaScript presentation library for navigating between html blocks with arrow keys and touch swipe support.

Basic usage:

Load both present.min.js and present.css into your html document.

<script src="present.min.js"></script>
<link rel="stylesheet" href="present.css">

Add html blocks for your web based presentation.

<div class="slide">
  <span class="present-title">Page 1</span>
  <span class="present-subtitle">Content 1</span>
</div>
<div class="slide">
  <span class="present-title">Page 2</span>
  <span class="present-subtitle">Content 2</span>
</div>
<div class="slide">
  <span class="present-title">Page 3</span>
  <span class="present-subtitle">Content 3</span>
</div>

You can use data-fragindex attribute for fragments.

<span class="present-subtitle" data-fragindex="1">Fragment</span>
<span class="present-subtitle" data-fragindex="2">Fragment</span>
<span class="present-subtitle" data-fragindex="3">Fragment</span>

Initialize the presentation.

present({
  // options here
});

Possible options with default values.

present({
  // auto vertical-middle Alignment
  alignMiddle: true,
  // animation of slide transition effect and speed
  animate: false,
  // animation speed
  animationSpeed: 400,
  // use the opacity change animation when slide changing
  opacityTransition: false,
  // use the background color change animation when background color of the change slide is different
  bgColorTransition: false,
  // Display text that shows current slide index and total slide count.
  showPageNumber: true,
  // Set position of showPageNumber.
  pageNumberPos: 'right bottom',
  // Display progress bar that shows presentation progress.
  showProgress: false,
  
});