flexile.js Example

← →

flexile.js

Use the arrows below or the left and right arrows on your keyboard to navigate

Purpose

flexile.js is a small, easy-to-use, JavaScript library for the creation of responsive, browser-based, slideshows and presentations. It is highly adaptable. For example...

Resize

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.

Change theme

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.

Press the "t" key or click here to toggle between the default light theme and a dark theme.

Change aspect ratio

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.

Press the "a" key on your keyboard (or click here) to loop through a selection of common aspect ratios.

Go fullscreen

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

Press "f" or click here to try it out.

Change how slides transition

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.

Define custom keys

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.

Source

flexile.js is open source, released under the MIT license, and available on GitHub at https://github.com/timbrock/flexile.js

It consists of a JavaScript file (about 30 KB unminified), and a CSS file (also about 30 KB).