sapui5 - UI5 Image Gallery with Indices (Carousel or Paginator) -
i build image gallery (in lightbox (overlay)) indices displaying index of current shown image. like:
i have more 5 pictures, need "swipe" gestures display next/prev ones , arrows.
first thought sap.ui.commons.carousel
perfect, did not find events (like e.g. "transitionend") not know how access current index then. paginator has no swipe event (?)..
i appreciate advice approach follow! first steps, i'd happy post code here. right need little start best fitting solution of controls.
thanks lot.
why not use sap.m.carousel? has pagechanged
event oldactivepageid
, newactivepageid
params.
here sample:
var appcarousel = new sap.m.app("myapp", {initialpage:"carouselpage"}); var carouselpage = new sap.m.page("carouselpage", {title: "carousel", enablescrolling: false } ); var page1 = new sap.m.page("page1", {title: "carousel test page 1", enablescrolling: false } ); var page2 = new sap.m.page("page2", {title: "carousel test page 2", enablescrolling: false } ); var carousel = new sap.m.carousel("mycarousel", { activepage: page1, loop: true, pages: [page1, page2] }); //listen 'pagechanged' events carousel.attachpagechanged(function(ocontrolevent) { console.log(1); console.log( "sap.m.carousel: page changed: old: " + ocontrolevent.getparameters().oldactivepageid ); console.log(" new: " + ocontrolevent.getparameters().newactivepageid ); }); carouselpage.addcontent(carousel); appcarousel.addpage(carouselpage); appcarousel.placeat("content"); sap.ui.getcore().applychanges();
jsbin: http://jsbin.com/tuqohoqinu/2/edit?html,css,js,console,output
you can see changing of pages in output window. hope helps. thanks.
Comments
Post a Comment