How to add scrolling to an ion-slides component (so I can scroll U/D and page L/R)

I am new to ionic programming. I am trying to figure out to get my ion-slides component to scroll up and down (as well as page left and right – working)

Below is the UI (notice how the bottom is cut off)

This my html code:

<ion-header>
  <app-toolbar-header [toolbarMeta]="toolbarMeta"></app-toolbar-header>
</ion-header>

<ion-content class="ion-padding" scrollbar="true">
  <app-connectivity-status></app-connectivity-status>

  <ion-slides pager="true">
    <ion-slide *ngFor="let e of evacNotice">
      <ion-list *ngIf="e.hideOrShow">
        <img [src]="e.icon" alt="" class="page-image">
        <ion-item class="ion-text-wrap text-import">
          <div style="overflow-y: auto;" [innerHTML]="sanitizeAndUnescapeHtml(e.body)"></div>
        </ion-item>
      </ion-list>
    </ion-slide>
  </ion-slides>
</ion-content>

This is my .css

 ion-slides {
    height: 95% !important;
  }

Note: I haven’t included the .ts file as its nut programming logic, not relevant to the UI layout.

I have looked at various site for help (Scroll to top in ionic), but nothing seems to work.

Any ideas

you need to add ion content around the slides that shall give you the default vertical scrolbar however I suggest you make the your ion-slide width to 100vw

Hi Nvispute.

Thanks for the suggestion, but I am confused. I already have the ion-content tag (outer most tag) with the ion-slides tag within it

The content component provides an easy to use content area with some useful methods to control the scrollable area. There should only be one content in a single view.

Statement taken directly from the doc.,…

Content tag in simple word… simply provides a single view <template> tag that wraps around certain content to be grouped together… you can use it in combination with many other components to build roburst and dynamic pages/module or components themeself…

Can you explain how how I should change my code?

I would move my ion-slides into a new file and wrap it under ion-content taking by the example from the code posted above

PS:: I am unaware of Angular… i have tried my best to explain this with vueJs…

Page1.vue

<ion-header>
  <app-toolbar-header [toolbarMeta]="toolbarMeta"></app-toolbar-header>
</ion-header>

<ion-content class="ion-padding" scrollbar="true">
  <app-connectivity-status></app-connectivity-status>
<my-slider></my-slider>
</ion-content>
<script>
import MySlider from "./MySlider.vue
export default {
component: {
MySlider 
}
}
</script>

MySlider.vue new file

<ion-content class="ion-padding" scrollbar="true">
  <ion-slides pager="true">
    <ion-slide *ngFor="let e of evacNotice">
      <ion-list *ngIf="e.hideOrShow">
        <img [src]="e.icon" alt="" class="page-image">
        <ion-item class="ion-text-wrap text-import">
          <div style="overflow-y: auto;" [innerHTML]="sanitizeAndUnescapeHtml(e.body)"></div>
        </ion-item>
      </ion-list>
    </ion-slide>
  </ion-slides>
</ion-content>

Basically, one view can be one page/one component displaying the data or one component holding a slotted component

I am not if I can do that within ionic. Can anyone else chime in?