Skip to content

A JavaScript library for advanced 2D slideshow with WebGL, that provides variety of beautiful effects

Notifications You must be signed in to change notification settings

yomotsu/gl-slideshow

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

gl-slideshow

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

Latest NPM release

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

*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 )

About

A JavaScript library for advanced 2D slideshow with WebGL, that provides variety of beautiful effects

Resources

Stars

Watchers

Forks

Packages

No packages published