GLSlideshow NPM

gl-slideshow

An advanced 2D slideshow with WebGL, provides a variety of beautiful effects with GLSL power.

Shaders are forked from https://gl-transitions.com/

Working Examples

Usage

$ npm install --save GLSlideshow

then

import GLSlideshow from 'GLSlideshow';

Traditional way in web browser

Copy GLSlideshow.js from /dist/gl-slideshow.js and place it in your project. Then, Load the js file in your HTML

<script src="./path/to/gl-slideshow.js"></script>

Make a GLSlideshow instance

<canvas id="myCanvas"></canvas>

<script>
const slideshow = new GLSlideshow(
	[ './img/1.jpg', './img/2.jpg', './img/3.jpg', './img/4.jpg' ],
	{
		canvas: document.getElementById( 'myCanvas' ), // optional
		width: 1024,        // optional
		height: 576,        // optional
		duration: 1000,     // optional
		interval: 5000,     // optional
		effect: 'crossZoom' // optional
	}
);
</script>

Constructor and Options

new GLSlideshow( images, options );

images (required)

An array consists of HTMLImageElements or strings for path to image.
Images must be hosted on the same domain or arrowed CORS.

Options

key	type	value
`canvas`	`HTMLCanvasElement`	The canvas element
`width`	`number`	width in pixels
`height`	`number`	height in pixels
`imageAspect`	`number`	aspect ratio of the image (assume all images are the same aspect ratio)
`duration`	`number`	duration time in milliseconds
`interval`	`number`	interval time in milliseconds
`effect`	`string`	name of effect *1