onsen carousel last item getActiveIndex
-
Hi,
lets assume, is have an onsen carousel with 5 ons-list-items.Navigation and scrolling working smooth without a problem, however, on page show, all carousels are reset and return die activeIndex = 0. However, for that there is a workaround and i am able to set the initial index to the old active index, therefore, the carousel will not "reset.
However, and here is the problem, if the item-width is not 100%, so i have a carousel with item-width of 80% (to see the next item in the carousel), if i am at the last item and call
“getActiveIndex” this will return the index of the previous item, because i am not able to fully scroll to the last item.
You are able to easily reproduce the issue:
HTML:
<ons-page> <ons-carousel fullscreen swipeable auto-scroll item-width="80%" overscrollable id="carousel"> <ons-carousel-item style="background-color: #085078;"> <div style="text-align: center; font-size: 30px; margin-top: 20px; color: #fff;"> BLUE </div> </ons-carousel-item> <ons-carousel-item style="background-color: #373B44;"> <div style="text-align: center; font-size: 30px; margin-top: 20px; color: #fff;"> DARK </div> </ons-carousel-item> <ons-carousel-item style="background-color: #D38312;"> <div style="text-align: center; font-size: 30px; margin-top: 20px; color: #fff;"> ORANGE </div> </ons-carousel-item> </ons-carousel> </ons-page>
JS:
ons.ready(function() { var carousel = document.addEventListener('postchange', function(event) { alert('Changed to ' + event.activeIndex) }); });
The postchange will never fire for the last item, is there any workaround? Thanks in advance
-
Sorry for late reply.
It seems the postchange will not fire for last item, because it is not yet touch the end. Instead of setting carousel item width 80%, set a div 80% to contain the carousel.
<div style="width:80%"> <ons-carousel fullscreen swipeable auto-scroll item-width="100%" overscrollable id="carousel"> <ons-carousel-item style="background-color: #085078;"> <div style="text-align: center; font-size: 30px; margin-top: 20px; color: #fff;"> BLUE </div> </ons-carousel-item> <ons-carousel-item style="background-color: #373B44;"> <div style="text-align: center; font-size: 30px; margin-top: 20px; color: #fff;"> DARK </div> </ons-carousel-item> <ons-carousel-item style="background-color: #D38312;"> <div style="text-align: center; font-size: 30px; margin-top: 20px; color: #fff;"> ORANGE </div> </ons-carousel-item> </ons-carousel> </div>
Best Regards
Gobi