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