帶指示器和下一個/上一個按鈕的溫泉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傳送帶

回答

相關問題