THEMETRIAL

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

Author:yomotsu
Views Total:1,320 views
Official Page:Go to website
Last Update:June 9, 2021
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="https://www.cssscript.com/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:

06/09/2021


Source link

Add comment

NOTE :

All visitors can share my site’s content on their blogs, sites, and social networks to enrich the content

Only share the source www.themetrial.com

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.