gl Slideshow is an advanced 2D slideshow with WebGL and provides a variety of beautiful effects with the power of GLSL. GLSlideshow.js is a standalone JavaScript library that is used to render an amazing slideshow with various transition effects based on WebGL and canvas.
webgl slider, javascript slideshow animation, smooth slideshow html slideshow library, slideshow script, webgl carousel, html5 video slideshow, curtains js tutorial
How to make use of it:
Create an HTML5 canvas component to position your slideshow.
<canvas id="slideshow-container"></canvas>
Download and put theΒ GLSlideshow.js JavaScript library on the bottom of the webpage.
<script src="GLSlideshow.js"></script>
Create a brand new slideshow instance from an array of photos.
const instance = new GLSlideshow( ['1.jpg', '2.jpg', '3.jpg'], { canvas: document.getElementById( 'slideshow-container' ) // more options here } );
Available slideshow choices.
// 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 strategies.
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 });
Cool Slideshow JavaScript Library With WebGL Based Effects, gl-slideshow Plugin/Github
See Demo And Download
Official Website(yomotsu): Click Here
This superior jQuery/javascript plugin is developed by yomotsu. For extra advanced usage, please go to the official website.
Be First to Comment