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

例如，您可以使用postchange事件来更改当前项目的样式。

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

Answer 2

从第2版

中删除了

无转播封面标签

我进行了一些更改以使其能够在v2上运行

1-从轮播容器中取出指示器

2-调整CSS以满足要求

3-为监听器和下一个/上一个按钮更新

document.querySelector('ons-carousel').addEventListener('postchange', function() { ... }).

在此处结帐工作代码：https://codepen.io/tarekadra/pen/dyYqQLo

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

2 个答案: