sapui5 - UI5 Image Gallery with Indices (Carousel or Paginator) -


i build image gallery (in lightbox (overlay)) indices displaying index of current shown image. like:

enter image description here

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

Popular posts from this blog

Java 3D LWJGL collision -

spring - SubProtocolWebSocketHandler - No handlers -

methods - python can't use function in submodule -