Ionic slidebox in a list

ionic-v1
1

Hello,
I am trying to create a list each item within that list is a slidebox. The list of slideboxes are displayed on lower half of the page and show/hide is controlled by the ng-show. The slides appears to be rendered on top of each other. Here is the html.

    <div ng-show="showContents">
    <ion-list>    
        <ion-item style="height: 50px; width: 100%; position:relative;" ng-repeat="itemproperty in selectedItem.Properties">
         <ion-slide-box show-pager="false" >
            <ion-slide ng-repeat="propValue in itemproperty.Values">
            <div class="box">
            {{propValue}}
            </div>
            </ion-slide>           
         </ion-slide-box>   
        </ion-item>
    </ion-list>

Here in the image there are two slideboxes (as list items), each of which has 3 slides with some text on them.
The text from all the slides is written in the same slide rather than adding 3 slides…slidebox is not scrollable either as there is only one slide.

Will appreciate help on this or any pointers.

2

@swaroop, can you please add your full code in CodePen or something like that?
I took your code and it works fine.
Maybe there is a problem loading ion-slide-box in your code.
Did you check the console?