Onsen-UI 带指示器和 next/previous 按钮的旋转木马

Question

我正在使用轮播并希望有指标（突出显示当前指标）和 next/previous 切换器。

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

抱歉提出了一个愚蠢的问题，但我阅读了文档和所有参考资料，但不知道如何让它发挥作用。我的代码笔在这里：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

ons-carousel-cover 标签已从 版本 2

中删除

我做了一些更改以使其适用于 v2

1- 从 ons-carousel 容器中取出指标

2-调整CSS满足要求

3- 正在为侦听器和 next/prev 按钮更新 javascript

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

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

Onsen-UI 带指示器和 next/previous 按钮的旋转木马

Onsen-UI Carousel with indicators and next/previous buttons

jquery

onsen-ui