Small Flexible Presentation Library – presentr.js

Category: Javascript , Recommended , Slider | December 11, 2019
Author: Simonwep
Views Total: 784
Official Page: Go to website
Last Update: December 11, 2019
License: MIT

Preview:

Small Flexible Presentation Library – presentr.js

Description:

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.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

You Might Be Interested In:


Leave a Reply