Advanced Presentation JavaScript Library – Presenta

Category: Javascript , Recommended , Slider | March 14, 2021
Views Total:97 views
Official Page:Go to website
Last Update:March 14, 2021


Advanced Presentation JavaScript Library – Presenta


Presenta is a powerful and full-featured presentation library to create responsive, touch-friendly, fully customizable presentations on the web app.

More Features:

  • Supports any content: text, images, videos, PDFs, etc.
  • Keyboard accessibility.
  • Slide and Fade transition effects.
  • Auto play and infinite loop.
  • Image & Video preloader.
  • Fullscreen Mode (Press f).
  • Beautiful predefined color schemes.

Basic Usage:

1. Install the package with NPM and import the Presenta as a module:

$ npm i @presenta/lib --save
import * as Presenta from '@presenta/lib'

2. Or directly load the compiled JavaScript in the document.

<script src="dist/presenta.min.js"></script>

3. Create a container in which you want to render the presentations.

<div id="example"></div>

4. Initialize the Presenta on the container and add your own presentation slides as follows:

var myPresentation = new Presenta('#example', {
        textVar: 'title',
        steps: 'p,.step',
        text:`<h3><mark>Use Arrows to move forward</mark></h3>
              <h1><span class="step">This</span>
              <span class="step">Title</span>
              <span class="step">Steps</span></h1>
        url:'/path/to/any content',
        code:'', // The complete iframe code, (required) if url is not set
        code:'', // or SVG code here
        // allows to set any CSS background property to the whole block area.
        // allows to stack two or more regular blocks together

5. Determine the transition effect:

  • hSlide
  • vSlide
  • slideOver
  • fadeIn
var myPresentation = new Presenta('#example', {
    transition: 'hSlide'

6. Customize the appearance of the presentations.

  • colors: adele, belle, cati, dania, elance, flo, gina, hedy, irma
  • fonts: cardina, corvid, creeper, duck, finch, flow, goose, heron
  • colorVar: main, sec, alt
  • sceneVar: ‘a’, ‘b’, ‘c’, ‘d’, ‘e’
  • aspect: radio aspect
  • adapt: adapt to the container size
  • noResize: disable the built-in resize feature
var myPresentation = new Presenta('#example', {
    aspect: 2,
    adapt: false,
    scenes: [...],
    noResize: false

7. Enable/disable controllers as per your needs.

var myPresentation = new Presenta('#example', {

      // enable keyboard navigation
      keyboard: true,

      // enable navigation arrows
      arrows: true,

      // show/hide a black screen by pressing 'b'
      black: true,

      // run the presentation in fullscreen by pressing 'f'
      fullscreen: true,

      // hide specific scene or block if it has the hidden option set to true
      hidden: true,

      // display a visual feedback when the user tries to navigate over the presentation begin or end
      limitswitch: true,

      // fetch external resources in order to inject the content in their relative config object
      cache: true,

      // enable autoplay
      // Boolean or Number (Delay)
      autoplay: false,

      // infinite loop
      loop: false,

      // auto set focus on the presentation
      focus: false,

      // enable progress bar
      progressbar: false,

      // randomize the order of the scenes on each instance session
      shuffle: false,

      // set the start scene
      current: false,

      // show the current page number and total pages
      // the default template '%s / %S' can be configured passing that String instead Bollean.
      // %s is the current scene, %S is the total scenes.
      pagenum: false,

      // preload images and videos
      preload: false,

      // It keeps in sync multiple instance of the same presentation that are in the same origin. 
      // It works in all the modern browsers except on Safari which doesn't support the native BroadcastChannel.
      // It basically syncs interactive events (keyboard, mouse, touch, still experimental).
      sync: false,

      // It keeps the router events sync on multiple instance of the same presentation. 
      // Same limitations as the sync controller.
      rsync: false,

      // infers the asset relative paths prepending a base-URL passed as value
      baseurl: false,

      // It loads at runtime external font resources setting the CSS variables used in the library. 
      // It requires an object with one or both the field heading and text. Both fields contain an object with url and name of the font-family you want to use.
      fonts: false,

      // Allow to add a logo or heading passing an HTML fragment
      brand: '',

      // add a list of buttons in a mini toolbar
      minitools: {}


8. API methods.

var myPresentation = new Presenta('#example', {...})
var router = myPresentation.router

// go to the next presentation slide;

// go to the prev presentation slide

// goto a specific presentation slide

// get the current slide index

// get the total number of slides

// bind/unbind events

9. Event handlers.

router.on('indexChanged', function(evt){
  // do something

router.on('nextIndex', function(evt){
  // do something

router.on('prevIndex', function(evt){
  // do something

router.on('begin', function(evt){
  // do something

router.on('end', function(evt){
  // do something

router.on('init', function(evt){
  // do something

router.on('stepChanged', function(evt){
  // do something

10. Properties:

  • currentIndex: Current index
  • currentStep: Current step
  • totalScenes: Total number of slides
  • totalSteps: Total number of steps
  • isFirst: Check if is the first one
  • isLast: Check if is the last one


v0.1.18 (03/14/2021)

  • Added Jump Controller to allow quick jump across scenes using internal links

v0.1.17 (03/13/2021)

  • Plugin wrappers name changed, it might require plugin update

v0.1.16 (03/11/2021)

  • Steps module fixes init unwanted transition

v0.1.15 (01/15/2021)

  • Moved custom styles in external plugin
  • Fixes a bug in nested list item size

v0.1.14 (01/10/2021)

  • new arrows icon
  • better config validation messages
  • icon in splash component
  • added fonts controller
  • better multi scene handling
  • fix in color schemes
  • better checks when loading plugin at run time

v0.1.12 (12/27/2020)

  • more props in pagenum ctrl
  • added generic padding container props
  • added minitools ctrl
  • added brand ctrl
  • added noResize root option
  • added version check in config validate
  • added out option in steps module
  • cleanups
  • several minor refactoring in ctrl

v0.1.11 (12/20/2020)

  • Splash custom message
  • Config validation
  • Bug fixes

v0.1.10 (12/14/2020)

  • added rsync controller
  • small fixes and cleanup

v0.1.9 (12/10/2020)

  • added splash view
  • added plugins key to install them from config
  • sync controller rewritten from the ground up
  • Bug fixes

v0.1.8 (12/06/2020)

  • Added baseurl controller to infer relative asset paths
  • Bug fixes & cleanups

v0.1.6 (11/26/2020)

  • steps now can drive multiple items at the same time
  • Bugfix

v0.1.5 (11/26/2020)

  • Now the instance of Presenta Lib is a Promise
  • cache controller run method return a Promise to fix some edge cases

v0.1.4 (11/25/2020)

  • svg block to inject external svg files
  • cache controller used by svg block to preload external resources
  • video block volume and rewind controls
  • Fixed arrow controller and router minor issues

v0.1.3 (11/21/2020)

  • This release resolve some bugs.
  • There is also a little API change, the steps feature requires a steps option instead step one.

You Might Be Interested In:

Leave a Reply