Glider

Options

data-zoom

Level of zoom after transition. Should be bigger than 1 for zoom in. Can be less than 1 for zoom out.

  • type: number (float)
  • default: 1.5
    ...
        <div data-zoom="1.3">
         ...
        </div>
    ...

data-direction

Level of zoom after transition. Should be bigger than 1 for zoom in. Can be less than 1 for zoom out.

  • possible values: 'top-left', 'top', 'top-right', 'left', 'center', 'right', 'bottom-left', 'bottom', 'bottom-right'
  • default: 'center'
    ...
        <div data-direction="top-right">
         ...
        </div>
    ...

data-distance

Initial distance from camera of particular image. Should be in range 0..1, where 1 is infinitely far (image will not become bigger during zoom), and 0 is real zoom level (image will be twice bigger after 2x zoom).

  • type: number (float)
  • default: automatically calculated depending on position in list of images.
    ...
    <img src="..." data-distance="0.9"/>
    ...

data-left

Left position in % of frame width.

  • type: number (float)
  • default: 0
    ...
    <img src="..." data-left="10.9"/>
    ...

data-top

Top position in % of frame height.

  • type: number (float)
  • default: 0
    ...
    <img src="..." data-top="22.7"/>
    ..

data-width

Image width in % of frame width.

  • type: number (float)
  • default: 100
    ...
    <img src="..." data-width="50"/>
    ..

data-height

Image height in % of frame height.

  • type: number (float)
  • default: 100
    ...
    <img src="..." data-height="50"/>
    ..

height

Frame height in % of frame width.

  • default: '50%'
var element = document.getElementById('slider');
var instance = new Glider(element, { height: '35.75%' });

duration

Duration of single slide in seconds.

  • default: 8
var element = document.getElementById('slider');
var instance = new Glider(element, { duration: 10 });

timing

Transition timing function

  • possible values: 'linear','ease','ease-in','ease-out','ease-in-out'
var element = document.getElementById('slider');
var instance = new Glider(element, { timing: 'ease' });

← Methods →