I have a couple of slides which have dynamic content that is added to them. The problem is the content inside of the slides doesn’t scroll. So if I have a lot of items only some show and there is no ability to slide. How can I make it so the content in my lists slides inside of their slides?
<ion-content>
<ion-slides (change)="onSlideChanged($event)">
<ion-slide >
<ion-list>
<ion-item *ngFor="#item of items1; #i = index">
<h2>{{item}</h2>
</ion-item>
</ion-list>
</ion-slide>
<ion-slide>
<ion-list>
<ion-item *ngFor="#item of items2; #i = index">
<h2>{{item}</h2>
</ion-item>
</ion-list>
</ion-slide>
</ion-slides>
</ion-content>
I have one solution : maybe not the best …
<ion-slide style="overflow-y:scroll">
2 Likes
EDIT: Sorry I have actually implemented this fully and noticed there is a problem. When in the slide the top content starts to get cut off. If I place the content into a normal page without it being inside a slide none of the content is cut off.
Wow. I have spent so much time on this and it was that simple. Thanks so much it works exactly how I need it now!
1 Like
ion-slide and ion-slider create a <div class="slide-zoom"> </div>
. Put the height of .slide-zoom to 100%.
Mainly : http://idangero.us/swiper/api/#.Vx07M_mLSCg provides all options you need to play with slides. I didn’t find something about slide-zoom inside it. The solution above work. Tell me you find a good option for the slide to fix this in a other way.
EDIT : To the Ionic Team, actually the slide component privide a zoom @input. How to use it in a pratical way ?
1 Like