Press "Enter" to skip to content

JavaScript library for advanced 2D slideshows with WebGL | GLSlideshow.js

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

    Leave a Reply

    Your email address will not be published.