Advanced Presentation JavaScript Library – Presenta

Category: Javascript , Recommended , Slider | November 26, 2020
Author: presenta-software
Views Total: 17 views
Official Page: Go to website
Last Update: November 26, 2020
License: MIT

Preview:

Advanced Presentation JavaScript Library – Presenta

Description:

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
$ 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', {
    scenes:[{
      blocks:[{
        type:'text',
        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>
              <p>Also</p>
              <p>These</p>
              <p>Paragraphs</p>`
      }]
    },{
      blocks:[{
        type:'text',
        text:'<h1>DONE!</h1>'
      }]
    },{
      blocks:[{
        type:'image',
        url:'/path/to/image.jpg'
      }] 
    },{
      blocks:[{
        type:'video',
        url:'/path/to/video.mp4',
        loop:true,
        autoplay:true,
        poster:'/path/to/poster.jpg'
    }]
  },{
      blocks:[{
        type:'embed',
        url:'/path/to/any content',
        code:'', // The complete iframe code, (required) if url is not set
        poster:'/path/to/poster.jpg'
    }]
  },{
      blocks:[{
        type:'svg',
        url:'/path/to/svg',
        code:'', // or SVG code here
    }]
  },{
      blocks:[{
        type:'solid',
        // allows to set any CSS background property to the whole block area.
    }]
  }{
      blocks:[{
        type:'group',
        // 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'
    scenes:[...]
})

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
var myPresentation = new Presenta('#example', {
    colors:'',
    fonts:'',
    colorVar:'',
    sceneVar:'',
    aspect: 2,
    adapt: false,
    scenes:[...]
})

7. Enable/disable controllers as per your needs.

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

      // 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,

      // 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,

      // set the start scene
      current: false,

      // show the current page number and total pages
      pagenum: false,

      // preload images and videos
      preload: false

    }
    scenes:[...]
})

8. API methods.

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

// go to the next presentation slide
router.next();

// go to the prev presentation slide
router.prev();

// goto a specific presentation slide
router.goto(index);

// get the current slide index
router.currentIndex();

// get the total number of slides
router.totalScenes();

// bind/unbind events
router.on(evt);
router.off(evt)

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

Changelog:

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