deawx / presentr

Minimalistic javascript presentation-library. Zero dependencies. Can be used in combination with frameworks like Bootstrap, Materialize, Vue etc.

Minimalistic, Hackable, Fast Presentation Library.

Features

• Simple usage
• No jQuery
• No dependencies
• Hackable / Extensible
• Ultra small, only 1.8 kB gzipped

Why another library to provide the ability to create a presentation in your browser? Isn't there already Revealjs which is good and reliable? Yeah, thought the same. But I was looking for a library which I can use in combination with React, Vue, Bootstrap, Materialize or whatever library I want. Something which only provides the essential functionalities like slides and fragments. So I've decided to write an absolutly basic, simple but functional library to provide these things.

Setup

Node

Install package:

$ npm install @simonwep/presentr --save

Include code and style:

import Presentr from 'Presentr';

---

Browser

jsdelivr:

<script src="https://cdn.jsdelivr.net/npm/@simonwep/presentr/dist/presentr.min.js"></script>

Directly:

<script src="node_modules/@simonwep/presentr/dist/presentr.min.js"></script>

Usage

// Simple example, see optional options for more configuration.
const presentr = new Presentr({

    // Selector for each slide
    slides: '.presentr .slides > section'
});

Optional options

const presentr = new Presentr({

     // Query selector to your slides.
    slides: '.presentr .slides > section',

    // Query selector for each fragment of the presentaion.
    fragments: '.frag',

    // Class which will be added to the current and previous slides.
    activeSlideClass: 'active',

    // Class which will be added only to the current slide.
    currentSlideClass: 'current-slide',

    // Same functionality, but for fragments.
    activeFragmentClass: 'active',
    currentFragmentClass: 'current-frag',
    
    /**
     *  Can be used to group fragments.
     *  Eg. Apply to multiple elements 'g-a' and they will 
     *  all get active until the first element wich this group 
     *  has been reached.
     */
    groupPrefix: 'g-',

    // Start index. Does not change the slide sequence.
    slideIndex: 0,

    // Keyboard shortcuts.
    shortcuts: {

        // Jump to next / previous slide
        nextSlide: ['d', 'D'],
        previousSlide: ['a', 'A'],

        // Jump to first / last slide
        firstSlide: ['y', 'Y'],
        lastSlide: ['x', 'X'],

        // Jumpt to next / previous fragement. If the first or last fragment is reached,
        // the next action would jump to the next / previous slide.
        nextFragment: ['ArrowRight', 'ArrowDown'],
        previousFragment: ['ArrowLeft', 'ArrowUp']
    },

    // Will be called on every slide change.
    onSlide(state) {
        state.presentr,        // Current instance
        state.slideIndex,      // Current slide index
        state.slides,          // Slides as HTMLElements (Array)
        state.slidePercent,    // Decimal percent value of how much of your slides are over
        state.fragmentIndex,   // Current fragment index
        state.fragments,       // Fragments as array in an array which index is the slide index
        state.fragmentPercent  // Same as slidePercent but for fragments on the current slide
    },

    // Will be called on every fragment change.
    onFragment(state) {
        // Same as onSlide
    },

    // Will be called on every slide or fragment change.
    onAction(state) {
        // Same as onSlide
    },

    // Initialization event, will be called on first initialization of presenter.
    onInit(state) {
        // Same as onSlide
    }
});

Methods

• presentr.nextSlide() - Jump to next slide.
• presentr.previousSlide() - Jump to previous slide.
• presentr.firstSlide() - Jump to first slide.
• presentr.lastSlide() - Jump to last slide.
• presentr.jumpSlide(index:Number) - Jump to a specific slide.
• presentr.nextFragment() - Jump to next fragment, if end reached the next slide will be shown.
• presentr.previousFragment() - Jump to previous fragment, if start reached the previous slide will be shown.
• presentr.jumpFragment(index:Number) - Jump to a specific fragment on the current slide.
• presentr.destroy() - Destroys the presentr instance and unbinds all event-listeners.

Contributing

If you want to open a issue, create a Pull Request or simply want to know how you can run it on your local machine, please read the Contributing guide.