How to make the slide scrollable

Ionic Framework ionic-v3
1

May I know the slide is scrollable? My contents in 1 of the slide is exceed the height, but the slide is not scrollable.

Please advise.

2

Did you try to put the ion-slide inside an ion-scroll?

I use this piece of code in my project, it works:

<ion-scroll scrollY="true">
	<ion-slides>
		//etc...
	</ion-slides>
</ion-scroll>
3

I tried ion-slides inside ion-scroll, and ion-scroll inside ion-slides but outside ion-slide, but both has display issue as below.
Can you please advise?

image
image614×770 12 KB

My code: 1st try

<ion-content padding>
  <ion-scroll scrollY="true">
    <ion-slides pager="true">
      <ion-slide>
        <img src="assets/img/abc.jpg" class="slide-image"/>
        <h3 class="slide-title">title 1</h3>
        <p>description</p>
        <ion-item text-left text-wrap>
          <ol type="1">
            <li>step 1</li>
            <li>step 2</li>
		    <li>step 3</li>
		    <li>step 4</li>
		    <li>step 5</li>
		    <li>step 6</li>
          </ol>
        </ion-item>
      </ion-slide>
    </ion-slides>
  </ion-scroll>
</ion-content>

My code: 2nd try

<ion-content padding>
  <ion-slides pager="true">
	<ion-scroll scrollY="true">
      <ion-slide>
        <img src="assets/img/abc.jpg" class="slide-image"/>
        <h3 class="slide-title">title 1</h3>
        <p>description</p>
        <ion-item text-left text-wrap>
          <ol type="1">
            <li>step 1</li>
            <li>step 2</li>
		   <li>step 3</li>
		   <li>step 4</li>
		   <li>step 5</li>
		   <li>step 6</li>
          </ol>
        </ion-item>
      </ion-slide>
	</ion-scroll>
  </ion-slides>
</ion-content>
4

|Try adding height: 100% via css to ion-scroll

5

Maybe you can fix it with resize() on your content. That fixed scrolling for me with an ion-list.

@ViewChild(Content) content: Content;
this.content.resize();