Tridi — Autoplay

Tridi container can be set up to start cycling through image array immediately after startup. It can also respond to mouse and touch events.

To enable autoplay, use autoplay: true.

Other relevant options:

  • autoplaySpeed (ms) - number of miliseconds between each image rotation cycle.
  • stopAutoplayOnClick (boolean) - if true, Tridi will stop autoplay when user clicks or taps viewer image
  • stopAutoplayOnMouseenter (boolean) - if true, Tridi will stop autoplay when user hovers viewer image
  • resumeAutoplayOnMouseleave (boolean) - if true, Tridi will resume autoplay when user hovers away from viewer image
  • resumeAutoplayDelay (ms) - if true, Tridi will wait n miliseconds before resuming autoplay.

Code

HTML

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

JavaScript

new Tridi({
  element: '#tridi-autoplay',
  location: '../images/white',
  format: 'jpg',
  count: 36,
  autoplay: true,
  autoplaySpeed: 40,
  stopAutoplayOnClick: true,
  stopAutoplayOnMouseenter: true,
  resumeAutoplayOnMouseleave: true,
  resumeAutoplayDelay: 1000
}).load();

« Back to main page