Cool Slideshow JavaScript Library With WebGL Based Effects – GLSlideshow.js

Preview:

Description:

GLSlideshow.js is a standalone JavaScript library used to render a cool slideshow with various WebGL and canvas based transition effects.

Basic usage:

Create an HTML5 canvas element to place your slideshow.

<canvas id="slideshow-container"></canvas>

Download and put the GLSlideshow.js JavaScript library at the bottom of the webpage.

<script src="GLSlideshow.js"></script>

Create a new slideshow instance from an array of images.

const instance = new GLSlideshow(
      ['1.jpg', '2.jpg', '3.jpg'],
      {
        canvas: document.getElementById( 'slideshow-container' )
        // more options here
      }
);

Available slideshow options.

// width and height of the slideshow
width: 1024,
height: 576, 
// duration time in ms
duration: 1000,
// interval time in ms
interval: 5000, 
// aspect ratio
imageAspect: null,
// 'crossFade'
// 'crossZoom'
// 'directionalWipe'
// 'wind'
// 'ripple'
// 'pageCurl'
effect: 'crossZoom'

API methods.

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

Event listeners.

instance.addEventListener( 'transitionStart', function () { 
  // transition start
});
instance.addEventListener( 'transitionEnd', function () { 
  // transition end
});

Changelog:

08/09/2024

• v2.4.1: bugfixes

09/10/2021

• v2.4.0

06/16/2021

• v2.3.1

06/09/2021

• v2.2.0