This sample is packaged based on caph 3.0.1
You can try the below demo with arrows keys and mouse-over at the corner of the list.
You can try the below demo with arrows keys and mouse-over at the corner of the list.
Let's try
Step 1 Include the caph-jquery
<script src="caph/3.0.1/caph-jquery.min.js"> </script>
Step 2 Create div for caphList
<div id="list1" style="position: absolute; left: 525px; top: 220px;">
// Put the template here.
</div>
// Put the template here.
</div>
Step 3 Set attribute for list
$('#list1').caphList({
template: '<div class="item item1" focusable>
<div style="width:100%; height:100%; background-size:100% 100%;
background: url(<%= item.image %>)"></div></div>',
items : items,
containerClass : 'list',
});
template: '<div class="item item1" focusable>
<div style="width:100%; height:100%; background-size:100% 100%;
background: url(<%= item.image %>)"></div></div>',
items : items,
containerClass : 'list',
});
More..
caphList provides several event such as onReachStart, onReachEnd, onScrollStart .. etc
Also, there are attributes can be set at caphList
For more details, please refer the api reference or development guide.
Also, there are attributes can be set at caphList
For more details, please refer the api reference or development guide.