Flexible Responsive Presentation & Slideshow Library – flexile.js

Preview:

Description:

flexile.js is a small, easy-to-use, JavaScript library for the creation of responsive, browser-based, slideshows and presentations. It is highly adaptable. Resize your browser or rotate your mobile device and the slides and text will adapt to the changes. Elements (like images and video) sized in percentages will do too.

It might not be obvious in advance of a presentation whether dark text on a light background or light text on a dark background would be better. With flexile.js you can define multiple themes with CSS and switch between them instantly.

With flexile.js you can use a number of preconfigured aspect ratios and instantly switch between them with the press of a key. Using regular CSS class selectors, a slides’ layout can be adapted to better fit a specific aspect ratio.

lexile.js makes the HTML5 Fullscreen API easy to use (where supported). With fullscreen mode you can stick several flexile.js slideshows together on a single page and let the user view each one at maximum size.

The CSS files that accompany flexile.js define around 40 different slide transition modes. It’s simple to set any given one as a default, but you can override the default on any slide or even set up a key or button that will change the transition mode on the fly.

flexile.js makes it easy to define custom keyboard keys to perform a number of operations. You’ve seen several examples already, but if you have a keyboard in front of you, you can also use the regular number keys to switch slides and the “[” and “]” keys to go to the start and end of the presentation.

Basic usage:

Add the following JS and CSS files to your html document.

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

Add your own slides to the presentation / slideshow.

<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 the presentation / slideshow.

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"});

Create the presentation / slideshow on the webpage.

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