<ch5-triggerview id="demo" endless="true"> <ch5-triggerview-child> <div class="viewcontainer"> <h1>First View</h1> <ch5-toggle></ch5-toggle> </div> </ch5-triggerview-child> <ch5-triggerview-child> <div class="viewcontainer"> <h1>Second View</h1> <ch5-button size="large" type="info" label="press me"></ch5-button> </div> </ch5-triggerview-child> <ch5-triggerview-child> <div class="viewcontainer"> <h1>Third View</h1> <ch5-slider></ch5-slider> </div> </ch5-triggerview-child> </ch5-triggerview> <br> <ch5-button id="prev" label="prev"></ch5-button> <ch5-button id="next" label="next"></ch5-button>
var demo = document.getElementById('demo');
var prev = document.getElementById('prev');
var next = document.getElementById('next');
prev.addEventListener('click', function() {
demo.previousViewChild();
});
next.addEventListener('click', function() {
demo.nextViewChild();
});
.viewcontainer {
border: darkgrey dashed 1px;
width: 100%;
height: 300px;
}