带有指示器和下一个/上一个按钮的Onsen-UI Carousel

Question

我正在使用旋转木马,并希望有指标(突出显示当前的一个)和下一个/前一个切换器.

<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>

很抱歉有一个愚蠢的问题,但我阅读了文档和所有参考资料,并且不知道如何使其工作.我的codepen在这里:http://codepen.io/onsen/pen/xbbzOQ

Answer 1

例如,您可以使用postchangeevent来更改当前项的样式.

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';
});

在这里工作:http://codepen.io/frankdiox/pen/QyLVqM