Slider3d

Slide3d is a functional slider with several animations powered by WebGL technology

new Slider3d('slider3d_1', {
    list: [ 
          'images/1.jpg',
          'images/2.jpg',
          'images/3.jpg',
          'images/4.jpg',
          'images/5.jpg',
          'images/6.jpg',
          'images/7.jpg',
          'images/8.jpg',
          'images/9.jpg'           
    ],

    textList: [
          'Easy to set up',
          'Customizability',
          'Various Animations',
          'Responsive Layout',
          'Powered by WebGL',
          'Various Animations',
          'Responsive Layout',
          'Easy to set up',
          'Customizability'
    ],

    animation: 'wave', 
    height: 600, 
    time: 4000, 
    arrows: true, 
    thumbs: true, 
    mirror: true 
});

Other Animations

plash

turn

flyaway

Options

list
Array of image urls. Required parameter

textList
Array of text strings. Оptional parameter.
Strings can contain html tags.
The number of lines can be less than or equal to the number of slides.
If you want to leave some slide without a caption in the middle of the list - just insert an empty line.

animation
Animation name. Оptional parameter - default is plash
Possible values: plash, turn, flyaway, wave

width
Fixed slider width. Оptional parameter.

height
Fixed slider height. Оptional parameter.

uicolor
Interface color(arrows and thumbs). Оptional parameter - default #ffa500

arrows
Show/hide Next and Back buttons. Оptional parameter - default true

thumbs
Show/hide thumbnails. Оptional parameter - default true

mirror
Show/hide reflection in bottom. Оptional parameter - default false

callback
Function called on slide change. Takes the number of the current slide. Оptional parameter.

External control

You can turn off sliders UI and make your own by using public methods this way:

let slider = new Slider3d('elementid', options);
slider.next(); //slide next 
slider.prev(); //slide back 
slider.setSlide(3); //show slide number 3 (numbering from zero)