Small Flexible Presentation Library – presentr.js

presentr.js is a lightweight, zero-dependency JavaScript library for creating a professional presentation on the browser.

The presentation enables the visitor to switch between slides/fragments using arrow keys and touch tap event. Compatible with both desktop and mobile.

See it in action:

How to use it:

Installation.

$ npm install @simonwep/presentr --save

Import the presentr.

import Presentr from 'Presentr';

Or directly load the JavaScript ‘presentr.min.js’ into the document.

<script src="/path/to/dist/presentr.min.js"></script>

Add slides, fragments, progressbar to the presentr container.

<div class="presentr">
  
  <div class="progress"></div>
  <div class="slides">
    <!-- Slide 1 -->
    <section class="slide01">
      Slide 1
    </section>
    <!-- Slide 2 -->
    <section class="slide02">
      <h2 class="frag">Fragment 1</h2>
      <div class="list">
        <p class="frag">Fragment 2</p>
        <p class="frag">Fragment 3</p>
        ...
      </div>
    </section>
    <!-- More Slides Here -->
    
  </div>
</div>

Initialize the presentation with default options.

const myPresentation = new Presentr();

Customize the presentation by overriding the default settings as follows:

const myPresentation = new Presentr({
      // Query selectors
      slides: '.presentr .slides > section',
      fragments: '.frag',
      // CSS classes
      activeSlideClass: 'active',
      currentSlideClass: 'current-slide',
      activeFragmentClass: 'active',
      currentFragmentClass: 'current-frag',
      // Start index
      slideIndex: 0,
      // Keyboard shortcuts
      shortcuts: {
        nextSlide: ['d', 'D'],
        previousSlide: ['a', 'A'],
        firstSlide: ['y', 'Y'],
        lastSlide: ['x', 'X'],
        nextFragment: ['ArrowRight', 'ArrowDown'],
        previousFragment: ['ArrowLeft', 'ArrowUp']
      },
});

Event handlers.

presentr.on('action', () => {
    console.log('action');
}).on('beforeSlide', obj => {
  console.log('beforeSlide', obj);
  // args: presentr: PickrInstance, from: slideIndex, to: slideIndex
}).on('beforeFragment', obj => {
  console.log('beforeFragment', obj);
  // args: presentr: PickrInstance, from: slideIndex, to: slideIndex
}).on('slide', () => {
  console.log('slide');
}).on('fragment', () => {
  console.log('fragment');
});

API methods.

// goto next
myPresentation.nextSlide()
// back to previous
myPresentation.previousSlide()
// go to the first slide
mypresentr.firstSlide()
// go to the last slide
mypresentr.lastSlide()
// goto a specific slide
myPresentation.jumpSlide(index)
// goto next fragment
myPresentation.nextFragment() 
// back to previous fragment
myPresentation.previousFragment()
// goto a specific fragment
myPresentation.jumpFragment(index)
// destroy the presentation
myPresentation.destroy()

Available properties.

// the total amout of slides
myPresentation.totalSlides
// the total amount of fragments in the current slide
myPresentation.totalFragments
// current slide index.
myPresentation.slideIndex
// current fragment index in the slide.
myPresentation.fragmentIndex
// the total amount of fragments on all slides combined
myPresentation.globalFragmentCount

Changelog:

v1.2.0 (04/20/2020)

• Simplifications; Fix messed up fragment handling

v1.1.1 (12/26/2019)

• Refactor state-management

v1.1.0 (12/11/2019)

• Use the on(event, cb) and off(event, cb) functions to bind / unbind eventlistener.

v1.0.0 (10/08/2019)

• update

10/01/2019

• Add native mobile-support

10/25/2018

• v0.0.4

10/23/2018

• v0.0.3: Add onInit event

09/21/2018

• v0.0.2