Tridi v2 — Autoplay

Looking for older version? Read Tridi v1 documentation here

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

const tridiInstance = Tridi.create({
  element: '#tridi-autoplay',
  location: './path/to/images',
  format: 'jpg',
  count: 36,
  autoplay: true,
  autoplaySpeed: 40,
  stopAutoplayOnClick: true,
  stopAutoplayOnMouseenter: true,
  resumeAutoplayOnMouseleave: true,
  resumeAutoplayDelay: 1000
});

tridiInstance.load();

« Back to main page