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

• Basic
• APIs
• Responsive
• Responsive-breakpoint
• Cover scale
• Custom shader
• Custom shader w/ additional texture

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 |

*1 Effect option currently takes following strings

• 'crossFade'
• 'crossZoom'
• 'directionalWipe'
• 'wind'
• 'ripple'
• 'pageCurl'

APIs

After you made an instance, you can control using the following methods.
For more detail, see APIs example

• instance.pause()
• instance.play()
• instance.setSize( width, height )
• instance.insert( image, order )
• instance.remove( order )
• instance.replace( images )
• instance.to( to )
• instance.setEffect( effectName [, uniforms ] )
• instance.destroy()

Editable params

• instance.duration
• instance.interval

Read only params

• instance.domElement
• instance.inTransition
• instance.length
• instance.currentIndex
• instance.prevIndex
• instance.nextIndex

Events

• instance.addEventListener( 'transitionStart', () => { /* callback */ } );
• instance.addEventListener( 'transitionEnd', () => { /* callback */ } );

Static methods

• GLSlideshow.addShader( 'shaderName', shaderSource, uniforms )