Author: | yomotsu |
---|---|
Views Total: | 675 views |
Official Page: | Go to website |
Last Update: | September 10, 2021 |
License: | MIT |
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:
09/10/2021
- v2.4.0
06/16/2021
- v2.3.1
06/09/2021
- v2.2.0