<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;
}
<ch5-triggerview id="demo2" endless="false">
<ch5-triggerview-child>
<ch5-image
url="https://picsum.photos/700/301/?random">
</ch5-image>
</ch5-triggerview-child >
<ch5-triggerview-child>
<ch5-image
url="https://picsum.photos/700/302/?random">
</ch5-image>
</ch5-triggerview-child >
<ch5-triggerview-child>
<ch5-image
url="https://picsum.photos/700/303/?random">
</ch5-image>
</ch5-triggerview-child >
</ch5-triggerview>
<br>
<ch5-button id="prev2" label="prev"></ch5-button>
<ch5-button id="next2" label="next"></ch5-button>
var demo2 = document.getElementById('demo2');
var prev2 = document.getElementById('prev2');
var next2 = document.getElementById('next2');
prev2.addEventListener('click', function() {
demo2.previousViewChild();
});
next2.addEventListener('click', function() {
demo2.nextViewChild();
});