Search code examples
mobilecarouselonsen-ui

onsen ui carousel - event on show

Is there any way to trigger an event when a certain Carousel item is displayed?

Below I put a code example, and want it performed a doSomething() function when the last item is shown:

<ons-template id="carrossel1.html">
  <ons-page ng-controller="CarrosselController">
	<ons-carousel fullscreen swipeable overscrollable auto-scroll>
		<ons-carousel-item ng-repeat="item in [1,2,3,4]" id="item{{item}}">
			Carousel Item {{item}} {{html}}
		</ons-carousel-item>
		<ons-carousel-item ng-repeat="item in [1]">
			FINAL (when this is show, I need to execute doSomething() function)
		</ons-carousel-item>
	</ons-carousel>
  </ons-page>
</ons-template>

How to do this?

tks

Solution

  • Carousel methods here. You can use on(eventName, listener) with the event postchange. That will trigger every time the carousel is changed, and then in the listener just check which index is active with getActiveCarouselItemIndex().

    Hope it helps!