Skip to content
Minimalistic javascript presentation-library. Zero dependencies. Can be used in combination with frameworks like Bootstrap, Materialize, Vue etc.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github
demo
dist
src
.gitignore
.travis.yml
LICENSE
README.md
babel.config.js
index.html
logo.png
package-lock.json
package.json
webpack.config.js

README.md

Logo

Minimalistic, Hackable, Fast Presentation Library.

License MIT Webpack No dependencies Build Status Current version Support me


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.

You can’t perform that action at this time.