THEMETRIAL

Advanced Presentation JavaScript Library – Presenta

Author:presenta-software
Views Total:2 views
Official Page:Go to website
Last Update:November 21, 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="https://www.cssscript.com/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'
    }]
  }]
})

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

Source link

Add comment

NOTE :

All visitors can share my site’s content on their blogs, sites, and social networks to enrich the content

Only share the source www.themetrial.com

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.