Biblioteca de presentación flexible pequeña-presentr. js

Vista prévia

Descripción

presentr. js es una biblioteca de JavaScript ligera y de dependencia cero para crear una presentación profesional en el explorador.

La presentación permite al visitante alternar entre diapositivas/fragmentos utilizando las teclas de flecha y el evento Touch TAP. Compatible tanto con escritorio como con dispositivos móviles.

See it in action:

Funcionamiento

Instalación.

$ npm install @simonwep/presentr --save

Importe la presentr.

import Presentr from 'Presentr';

O cargue directamente el JavaScript ' presentr. min. js ' en el documento.

<script src="/path/to/dist/presentr.min.js"></script>

Añadir diapositivas, fragmentos, ProgressBar al contenedor de presentr.

<div class="presentr">



<div class="progress"></div>


<div class="slides">



<!-- Slide 1 -->


<section class="slide01">



Slide 1


</section>



<!-- Slide 2 -->


<section class="slide02">



<h2 class="frag">Fragment 1</h2>



<div class="list">




<p class="frag">Fragment 2</p>




<p class="frag">Fragment 3</p>




...



</div>


</section>



<!-- More Slides Here -->




</div>

</div>

Inicializar la presentación con las opciones predeterminadas.

const myPresentation = new Presentr();

Personalice la presentación anulando la configuración predeterminada de la siguiente manera:

const myPresentation = new Presentr({




// Query selectors



slides: '.presentr .slides > section',



fragments: '.frag',




// CSS classes



activeSlideClass: 'active',



currentSlideClass: 'current-slide',



activeFragmentClass: 'active',



currentFragmentClass: 'current-frag',




// Start index



slideIndex: 0,




// Keyboard shortcuts



shortcuts: {




nextSlide: ['d', 'D'],




previousSlide: ['a', 'A'],





firstSlide: ['y', 'Y'],




lastSlide: ['x', 'X'],





nextFragment: ['ArrowRight', 'ArrowDown'],




previousFragment: ['ArrowLeft', 'ArrowUp']



},

});

Event handlers.

const myPresentation = new Presentr({




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



}

});

API methods.

// goto next
myPresentation.nextSlide()

// back to previous
myPresentation.previousSlide()

// goto a specific slide
myPresentation.jumpSlide(index)

// goto next fragment
myPresentation.nextFragment()

 // back to previous fragment
myPresentation.previousFragment()

// goto a specific fragment
myPresentation.jumpFragment(index)

// destroy the presentation
myPresentation.destroy()

Registro de cambios

10/25/2018

• v0.0.4

10/23/2018

• v0.0.3: Add onInit event

09/21/2018

• v0.0.2