Tridi v2 — Custom controls

Looking for older version? Read Tridi v1 documentation here

Previous frame

Next frame

Start autoplay

Stop autoplay

Each Tridi instance exposes a few methods which make it possible to control Tridi viewer programatically:

next()

Shows next frame from the image array.

prev()

Shows previous frame from the image array.

autoplayStart()

Starts autoplay sequence.

autoplayStop()

Stops autoplay sequence.

Code

HTML

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

<div class="custom-control-prev">Previous frame</div>
<div class="custom-control-next">Next frame</div>
<div class="custom-control-start">Start autoplay</div>
<div class="custom-control-stop">Stop autoplay</div>

JavaScript

const tridiInstance = Tridi.create({
  element: '#tridi-dynamic',
  imageLocation: './path/to/images',
  imageFormat: 'jpg',
  imageCount: 36,
});

tridiInstance.load();

const prevBtn = document.querySelector('.custom-control-prev');
const nextBtn = document.querySelector('.custom-control-next');
const startBtn = document.querySelector('.custom-control-start');
const stopBtn = document.querySelector('.custom-control-stop');

// Click events

prevBtn.addEventListener('click', function() {
  tridiInstance.prev();
})

nextBtn.addEventListener('click', function() {
  tridiInstance.next();
})

startBtn.addEventListener('click', function() {
  tridiInstance.autoplayStart();
});

stopBtn.addEventListener('click', function() {
  tridiInstance.autoplayStop();
});

// Touch events

prevBtn.addEventListener('touchend', function() {
  tridiInstance.prev();
}, { passive: true });

nextBtn.addEventListener('touchend', function() {
  tridiInstance.next();
}, { passive: true });

startBtn.addEventListener('touchend', function() {
  tridiInstance.autoplayStart();
}, { passive: true });

stopBtn.addEventListener('touchend', function() {
  tridiInstance.autoplayStop();
}, { passive: true });