带指示器和下一个/上一个按钮的温泉UI传送带

我正在使用传送带并希望有指示器（突出显示当前的那个）和下一个/上一个切换器。带指示器和下一个/上一个按钮的温泉UI传送带

<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

来源

2015-12-02 qqruza

例如，您可以使用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

来源

2015-12-03 03:07:48

谢谢@FranDios但我怎么可以添加一个和上一个togglers？具有在第一张幻灯片上隐藏上一张和在最后一张上隐藏下一张的功能。我真的很感谢你的帮助！ – qqruza

@qqruza这是相同的过程，只是隐藏和显示div而不是着色它们。我更新了codepen，看看。 –

你是超级巨星！所以这段代码应该去我的module.controller（我有几个）？或到单独的JS文件？ – qqruza

带指示器和下一个/上一个按钮的温泉UI传送带

回答

相关问题