Tridi v2 — Mouse drag

Looking for older version? Read Tridi v1 documentation here

Tridi supports mouse drag events out of the box. This setting can be disabled by passing false to draggable option. If you want to disable all drag events entirely, remember to set touch to false as well.

Rotation speed can be adjusted by passing an integer to dragInterval option. Note that this setting does not affect touch events. For more information on touch see Touch support.

Options

  • draggable (boolean) - enables / disables mouse drag events. Optional, defaults to true
  • dragInterval (number) - adjusts rotation speed. Higher number means more mouse drag movement is required for a single rotation cycle. Optional, defaults to 1
  • inverse (boolean) - set to true to inverse direction of image rotation. Optional, defaults to false
  • mouseleaveDetect (boolean) - if true, active drag event will be terminated whenever mouse cursor leaves Tridi container

Code

HTML

<div id="tridi-drag"></div>

JavaScript

const tridiInstance = Tridi.create({
  element: '#tridi-drag',
  location: './path/to/image/folder',
  format: 'jpg',
  count: 36,
  dragInterval: 1
});

tridiInstance.load();

« Back to main page