Tridi — Autoplay

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

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