Tridi — Custom controls

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

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 });

« Back to main page