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 imagestopAutoplayOnMouseenter
(boolean) - if true
, Tridi will stop autoplay when user hovers viewer imageresumeAutoplayOnMouseleave
(boolean) - if true
, Tridi will resume autoplay when user hovers away from viewer imageresumeAutoplayDelay
(ms) - if true
, Tridi will wait n
miliseconds before resuming autoplay.<div id="tridi-autoplay"></div>
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();