Search code examples
carouselimage-gallerysapui5paginator

UI5 Image Gallery with Indices (Carousel or Paginator)

I would like to build a image gallery (in a lightbox (Overlay)) with Indices displaying the index of the current shown image. Like:

enter image description here

I will rarely have more than 5 pictures, I need "swipe" gestures to display the next/prev ones AND arrows.

First I thought the sap.ui.commons.Carousel would be perfect, but as I did not find any events (like e.g. "transitionEnd") I do not know how to access the current index then. The paginator has no swipe event (?)..

I would appreciate any advice which approach you would follow! Just for the first steps, then I'd be happy to post my code here. Right now I need a little help to start with the best fitting solution of controls.

Thanks a lot.

Solution

  • Why not use sap.m.Carousel? It has pageChanged event with oldActivePageId and newActivePageId params.

    Here is a 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 to '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 the output window. Hope that helps. Thanks.