Pure JavaScript Library For HTML5 Web Presentation – Present.js

Category: Javascript , Recommended , Slider | February 3, 2016
Author: Mystika
Views Total: 2,280
Official Page: Go to website
Last Update: February 3, 2016
License: MIT

Preview:

Pure JavaScript Library For HTML5 Web Presentation – Present.js

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

 

You Might Be Interested In:


Leave a Reply