Tridi — Mouse drag

This docs is for Tridi v1.x. Read Tridi v2 documentation or how to upgrade to version 2.x

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.


  • 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



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


new Tridi({
  element: '#tridi-drag',
  location: './path/to/image/folder',
  format: 'jpg',
  count: 36,
  dragInterval: 1

« Back to main page