Minimalistic, Hackable, Fast Presentation Library.

alt="Build Status"
src="https://img.shields.io/travis/Simonwep/presentr.svg?style=popout-square">
alt="Download count"
src="https://img.shields.io/npm/dm/@simonwep/presentr.svg?style=popout-square">

alt="JSDelivr download count"
src="https://data.jsdelivr.com/v1/package/npm/@simonwep/presentr/badge">
src="https://img.shields.io/github/tag/Simonwep/presentr.svg?color=3498DB&label=version&style=flat-square">
alt="Support me"
src="https://img.shields.io/badge/patreon-support-3498DB.svg?style=popout-square">

$3

* No jQuery
* No dependencies
* Hackable / Extensible
* Ultra small
* Native mobile-support

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 very essential functionalities to control slides and fragments.

Setup

$3

Install package:
``shell
$ npm install @simonwep/presentr --save
`

Include code and style:
`js
import presentr from '@simonwep/presentr';
`
---

$3

jsdelivr:
`html

`

Directly:
`html

`

Usage

`javascript
// Simple example, see optional options for more configuration.
const presentr = new Presentr({
slides: '.slide',
fragments: '.frag'
});
`

Optional options

`javascript
const presentr = new Presentr({

// Query selector to your slides.
slides: '.slide',

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

/**
* Can be used to group fragments.
* Apply to multiple elements 'g-a' and they will
* all get active until the first element wich this group
* has been reached.
*/
fragmentGroupPrefix: 'g-',

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

// CSS Classes to get control the appereance of slides and fragments.
// It's possible to use arrays
classes: {
previousSlide: 'previous-slide', // Class for slides behind the current one
nextSlide: 'next-slide', // Class for slides after the current one
currentSlide: 'current-slide', // Class which will be added only to the current slide.

// Same functionality, just for fragments.
activeFragment: 'active-frag',
currentFragment: 'current-frag'
},

// 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']
}
});
`

Events

Since version 1.1.x Presentr is event-driven. Use the on(event, cb) and off(event, cb) functions to bind / unbind eventlistener.

| Event | Description | Arguments |
| -------------- | ----------- | ----------- |
| action | Fires both on slide and fragment | {presentr: PickrInstance} |
| beforeSlide | Before slide changes | {presentr: PickrInstance, from: slideIndex, to: slideIndex} |
| slide | Slide changed | {presentr: PickrInstance} |
| beforeFragment | Before fragment changes | {presentr: PickrInstance, from: fragmentIndex, to: fragmentIndex} |
| fragment | Fragment changed | PickrInstance |

> Example:
`js
presentr.on('action', () => {
console.log('action');
}).on('beforeSlide', obj => {
console.log('beforeSlide', obj);
// Return false explicitly to block slide
}).on('beforeFragment', obj => {
console.log('beforeFragment', obj);
// Return false explicitly to block fragment
}).on('slide', () => {
console.log('slide');
}).on('fragment', () => {
console.log('fragment');
});
`

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

Getters

* presentr.totalSlides _- Total amount of slides._
* presentr.totalFragments _- Total amount of fragments in current slide._
* presentr.slideIndex _- Current slide index._
* presentr.fragmentIndex _- Current fragment index in slide._
* presentr.globalFragmentCount _- Total amount of fragments on all slides combined._

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.