Looking for older version? Read Tridi v1 documentation here
Each Tridi instance exposes a few methods which make it possible to control Tridi viewer programatically:
Shows next frame from the image array.
Shows previous frame from the image array.
Starts autoplay sequence.
Stops autoplay sequence.
<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>
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 });