Tridi — Custom controls

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

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

tridi.load();

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

// Click events

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

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

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

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

// Touch events

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

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

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

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