Carousel control
Read control or widget as a GUI widget which is different from the Web widget (disclosure, I work for Opera Software).
No style
No JavaScript
JavaScript
One pagination
var carousel = new Carousel("car"),
pagination = new Pager("pager"),
status = document.getElementById("status");
pagination.addEventListener("page", function(event) {
carousel.gotoPage(event.page);
}, false);
carousel.addEventListener("page", function(event) {
pagination.initPagination(event.page, event.pageTotal);
status.innerHTML = "page "+event.page + " of "+event.pageTotal;
}, false).gotoElement(0);
Two paginations
var carousel = new Carousel("car", {pageSize: 4}),
pagtop = new Pager("pagertop"),
pagbottom = new Pager("pagerbottom"),
status = document.getElementById("status");
pagtop.addEventListener("page", function(event) {
carousel.gotoPage(event.page);
}, false);
pagbottom.addEventListener("page", function(event) {
carousel.gotoPage(event.page);
}, false);
carousel.addEventListener("page", function(event) {
pagtop.initPagination(event.page, event.pageTotal);
pagbottom.initPagination(event.page, event.pageTotal);
status.innerHTML = "page "+event.page + " of "+event.pageTotal;
}, false).gotoElement(0);