Onsen-UI Carousel with indicators and next/previous buttons

Question

I am using carousel and want to have indicators (highlight the current one) and next/previous togglers.

<ons-page>
  <ons-toolbar>
    <div class="center">Carousel</div>
  </ons-toolbar>
  <ons-carousel swipeable overscrollable auto-scroll fullscreen var="myCarousel">
    <ons-carousel-item style="background-color: gray;">
      <div class="item-label">GRAY</div>
    </ons-carousel-item>
    <ons-carousel-item style="background-color: #085078;">
      <div class="item-label">BLUE</div>
    </ons-carousel-item>
    <ons-carousel-item style="background-color: #373B44;">
      <div class="item-label">DARK</div>
    </ons-carousel-item>
    <ons-carousel-cover>
      <div class="cover-label">1 2 3</div>
    </ons-carousel-cover>
  </ons-carousel>
</ons-page>

Sorry for a stupid question but I read documentation and all references and haven't got an idea how to make it working. My codepen is here: http://codepen.io/onsen/pen/xbbzOQ

Answer 1

You can use postchange event to change the style of the current item, for example.

HTML:

<ons-carousel-cover>
  <div class="cover-label">
    <span class="indicators"> 1 </span>
    <span class="indicators"> 2 </span>
    <span class="indicators"> 3 </span>
    <span class="indicators"> 4 </span>
  </div>
</ons-carousel-cover>

JS:

document.querySelectorAll('.indicators')[0].style.color = 'red';

document.addEventListener('ons-carousel:postchange', function(event){
    document.querySelectorAll('.indicators')[event.lastActiveIndex].style.color = 'white';
    document.querySelectorAll('.indicators')[event.activeIndex].style.color = 'red';
});

Working here: http://codepen.io/frankdiox/pen/QyLVqM