Biblioteca JavaScript pura para la presentación web HTML5-Present. js

Vista prévia

Descripción

Present. js es una biblioteca de presentación JavaScript pequeña, adaptable y altamente personalizable para navegar entre los bloques HTML con teclas de flecha y el soporte de barrido táctil.

¿Cómo funciona?

Cargue el presente. min. js y el present. CSS en su documento HTML.

<script src="present.min.js"></script>
<link rel="stylesheet" href="present.css">

Agregue bloques HTML para su presentación basada en la Web.

<div class="slide">

<span class="present-title">Page 1</span>

<span class="present-subtitle">Content 1</span>
</div>

<div class="slide">

<span class="present-title">Page 2</span>

<span class="present-subtitle">Content 2</span>
</div>

<div class="slide">

<span class="present-title">Page 3</span>

<span class="present-subtitle">Content 3</span>
</div>

Puede utilizar atributo Data-fragindex para fragmentos.

<span class="present-subtitle" data-fragindex="1">Fragment</span>
<span class="present-subtitle" data-fragindex="2">Fragment</span>
<span class="present-subtitle" data-fragindex="3">Fragment</span>

Inicializar la presentación.

present({

// options here
});

Opciones posibles con valores predeterminados.

present({


// auto vertical-middle Alignment

alignMiddle: true,


// animation of slide transition effect and speed

animate: false,


// animation speed

animationSpeed: 400,


// use the opacity change animation when slide changing

opacityTransition: false,


// use the background color change animation when background color of the change slide is different

bgColorTransition: false,


// Display text that shows current slide index and total slide count.

showPageNumber: true,


// Set position of showPageNumber.

pageNumberPos: 'right bottom',


// Display progress bar that shows presentation progress.

showProgress: false,


});