Presentación adaptable flexible & biblioteca de diapositivas-Flexile. js

Vista prévia

Descripción

Flexile. js es una pequeña, fácil de usar, biblioteca de JavaScript para la creación de responsive, basado en el navegador, presentaciones de diapositivas y exposiciones. Es altamente adaptable. Cambie el tamaño de su navegador o gire su dispositivo móvil y las diapositivas y el texto se adaptarán a los cambios. Los elementos (como imágenes y video) de tamaño en porcentajes también lo harán.

Puede que no sea obvio antes de una presentación si el texto oscuro sobre un fondo claro o texto claro en un fondo oscuro sería mejor. Con Flexile. js puede definir varios temas con CSS y alternar entre ellos al instante.

Con Flexile. js puede utilizar una serie de proporciones de aspecto preconfiguradas y cambiar instantáneamente entre ellas con la pulsación de una tecla. Mediante el uso de selectores de clase CSS normales, el diseño de las diapositivas se puede adaptar para ajustarse mejor a una relación de aspecto específica.

Lexile. js hace que la API de pantalla completa de HTML5 sea fácil de usar (donde se admita). Con el modo de pantalla completa puede pegar varias presentaciones de diapositivas Flexile. js en una sola página y dejar que el usuario vea cada una con el tamaño máximo.

Los archivos CSS que acompañan a Flexile. js definen alrededor de 40 modos diferentes de transición de diapositivas. Es fácil de configurar cualquier uno dado como predeterminado, pero puede invalidar el valor predeterminado en cualquier diapositiva o incluso configurar una tecla o botón que cambiará el modo de transición sobre la marcha.

Flexile. js facilita la definición de teclas de teclado personalizadas para realizar una serie de operaciones. Ya has visto varios ejemplos, pero si tienes un teclado delante de ti, también puedes usar las teclas numéricas regulares para cambiar las diapositivas y las teclas "[" y "]" para ir al inicio y al final de la presentación.

¿Cómo funciona?

Agregue los siguientes archivos JS y CSS a su documento HTML.

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

Añada sus propias diapositivas a la presentación/proyección de diapositivas.

<div id="presentation">

<section><p>First content slide</p></section>

<section><p>Second content slide</p></section>

<section><p>Third content slide</p></section>

...
</div>

Config la presentación/proyección de diapositivas.

let config = flexile.config()


.setAspects(["wide", "monitor", "traditional", "cinema"])


.setThemes(["light", "dark"])


.setTransitions("slide-right")


.addKeys(flexile.helpers.keys.lrpn)


.addKeys(flexile.helpers.keys.numbers1)


.addKeys([{code: 219, value: "first"}, {code: 221, value: "last"}])


.addKeys([{code: 65, value: "aspect"}, {code: 70, value: "fullscreen"}])


.addKeys({code: 84, value: "theme"});

Cree la presentación/proyección de diapositivas en la Página Web.

let presentation = flexile.create("#presentation", config);