Frontools-ui-slideshow NPM

·▄▄▄▄▄▄         ▐ ▄ ▄▄▄▄▄            ▄▄▌  .▄▄ ·
▐▄▄·▀▄ █·▪     •█▌▐█•██  ▪     ▪     ██•  ▐█ ▀.
██▪ ▐▀▀▄  ▄█▀▄ ▐█▐▐▌ ▐█.▪ ▄█▀▄  ▄█▀▄ ██▪  ▄▀▀▀█▄
██▌.▐█•█▌▐█▌.▐▌██▐█▌ ▐█▌·▐█▌.▐▌▐█▌.▐▌▐█▌▐▌▐█▄▪▐█
▀▀▀ .▀  ▀ ▀█▄▀▪▀▀ █▪ ▀▀▀  ▀█▄▀▪ ▀█▄▀▪.▀▀▀  ▀▀▀▀
     The front-end designer's low-level toolbox

About Frontools

Frontools is a bundle of tools for front-end designers who want to have a low level development workflow. No bullshit, it's easy to learn.

It supports only modern browsers

This work is licensed under the Creative Commons Attribution-ShareAlike 4.0 International License. To view a copy of this license, visit or send a letter to Creative Commons, PO Box 1866, Mountain View, CA 94042, USA.

Slideshow

frontools-ui-slideshow is written using ECMAScript 2015 and is a NPM module. Whereas it can be used independently, it has been done to work with Frontools

Installation

If you use it within frontools web-starter-kit:

npm install frontools-ui-slideshow frontools-js-polyfills eventemitter3 --save-dev

If you use it alone, add also:

npm install virtual-dom jsx-transform --save-dev

If you want it to be transpiled into ECMAScript 5.x, use Babelify with the es2015 preset. See package.json for more information.

Usage

Look at the example in the ./test folder for more information.

Code (HTML & JS)

CSS classes Slideshow and Slideshow-Application have to be defined. The IDs' name can be freely defined.

Simple

<div id="Slideshow" class="Slideshow">
	<div class="slide" data-image="" data-video=""> <!-- your content here --> </div>
</div>

import Slideshow from "frontools-ui-slideshow";

// Define Slideshow
var slideshow = new Slideshow( document.getElementById( "Slideshow" ) );

// Render the DOM
slideshow.render();

// Launch the Slideshow
slideshow.run();

@import "frontools-ui-slideshow";

All options

<div id="Slideshow" class="Slideshow">
	<div class="slide" data-image="" data-video=""> <!-- your content here --> </div>

	<!--  Not necessary. The bullet will be duplicated automatically -->
	<div id="Slideshow-Bullets" class="Slideshow-Bullets">
		<div class="bullet"> <!-- only one bullet's content here -->  </div>
	</div>
</div>

<!-- You can place it whereever you want or simply avoid it.
     If not declared, it will be placed automatically in Slideshow Element -->
<div id="Slideshow-Application" class="Slideshow-Application"></div>

import Slideshow from "frontools-ui-slideshow";

// Define Slideshow
var slideshow = new Slideshow(
		document.getElementById( "Slideshow" ),
		5500,
		1500,
		document.getElementById( "Slideshow-Application" )
);

// Events listeners
slideshow.event.on( "ready", function () {
    // Launch the Slideshow - if true => reverse mode
    slideshow.run( true );
}, null );

// Render the DOM
slideshow.render_bullets( document.getElementById( "Slideshow-Bullets" ) );
slideshow.render();

@import "frontools-ui-slideshow";

Events

Videos have always a picture as background. So as a lazy loader we are just looking at pictures loading time. All pictures are downloaded asynchronously.

ready event means the slide 0 has been downloaded. Other pictures could have been downloaded quickly or slowly.
loaded event means all pictures have been downloaded.

Styling (CSS)

The module doesn't apply any styles and/or JS animations. The above classes definition is done to be used with CSS Animations.

Slides

.slide: default state, hidden
.slide.-show: actual shown slide, active
.slide.-show.-last: previous shown slide

Bullets

.bullet: default state, inactive
.bullet.-show: actual shown slide, active
.bullet.-show.-last: previous shown slide

Bullets

If you choose to render bullets, a click EventListener will be automatically attached in order to show the choosen slide. The animation is stopped once a bullet is clicked.