Я пытаюсь настроить цветные индикаторы на изменение индекса карусели. Я читал это документ , но я не понимаю, как его использовать
Я хочу сделать что-то вроде этот , но он не работает, потому что его другая версия икоторый использует чистый JavaScript
Вот мой HTML-код
<ons-navigator var="myNav">
<ons-page ng-controller="AppCtrl">
<ons-carousel swipeable overscrollable auto-scroll var="carousel" id="carousel" auto-scroll-ratio=“0.01” >
<ons-carousel-item class="car" style="background-color:blue;">
<div class="item-label">
BLUE
</div>
</ons-carousel-item>
<ons-carousel-item class="car" style="background-color:grey">
<div class="item-label">
GREY
</div>
</ons-carousel-item>
<ons-carousel-item class="car" style="background-color:gold">
<div class="item-label">
GOLD
</div>
<ons-carousel-item>
</ons-carousel>
<div class="cover-label">
<span class="indicators"></span>
<span class="indicators"></span>
<span class="indicators"></span>
</div>
</ons-page>
</ons-navigator>
CSS
ons-carousel-item{
display: table;
text-align: center;
}
.car{
height: 200px;
}
.item-label{
display:table-cell;
vertical-align:middle;
font-size:30px;
line-height: 1;
color: white;
font-weight:bold;
}
.cover-label{
text-align: center;
}
.indicators{
height: 7px;
width: 7px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
}