The following code works perfectly in my app.
<ion-view title="Promotions">
<ion-slide-box active-slide="myActiveSlide">
<ion-slide>
<div class="box blue"><h1>BLUE</h1></div>
</ion-slide>
<ion-slide>
<div class="box yellow"><h1>YELLOW</h1></div>
</ion-slide>
<ion-slide>
<div class="box pink"><h1>PINK</h1></div>
</ion-slide>
</ion-slide-box>
</ion-view>
but when I use ng-repeat as follows the output gets messy,
<ion-view title="Promotions">
<ion-slide-box active-slide="1">
<ion-slide ng-repeat="obj in promotions">
<div class="box blue"><h1>BLUE</h1></div>
</ion-slide>
</ion-slide-box>
</ion-view>
CSS used is as follows;
.slider {
height: 100%;
}
.slider-slide {
padding-top: 80px;
color: #000;
background-color: #fff;
text-align: center;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
.blue {
background-color: blue;
}
.yellow {
background-color: yellow;
}
.pink {
background-color: pink;
}
Can someone please explain why this is happening and also suggest a possible fix? Thank you in advance.