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

Category: Javascript , Recommended , Slideshow | March 27, 2019
Author: yomotsu
Views Total: 4,002
Official Page: Go to website
Last Update: March 27, 2019
License: MIT

Preview:

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

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:

03/27/2019

  • v2

You Might Be Interested In:


Leave a Reply