Ionic - scroll within Ionic Slide not working


I dont see a vertical scroll bar to scroll through the contents in an ionic slider, below is the html snippet that shows what I am trying to do. Is there something wrong with the way I am rendering, please advise.


Try this


Sorry, I see a blank screen when I have ion-content within ion-slide, any ideas?


Implement the scroll to container is easy job. You don’t must all time wait it from Ionic Team.

<div style="height:100px;width:100px;overflow:auto;">
As you can see, once there's enough text in this box, the box will grow scroll bars... that's why we call it a scroll box! You could also place an image into the scroll box.

Sorry for the delay. Hmm, looks like I was too quick to judge this one.

Try this.


Thank you for looking into this issue, but both the above solutions didnt work, if I put a ion-card with ion-slide, please refer to screen shot below, it shown the last section of page with no scrolling option, please increase the content with in ion-card. Thanks again for looking into.


You should be able to fix that with CSS, changing the overflow and display settings of the “swiper-slide” class, something like:

.swiper-slide {
    overflow-y: scroll;
    display: block;

Thank you very much Simone that fixed my problem…


simonebizarra solution is the right one. :slight_smile:
If you end up having two scroll bars just do the following:
in your html file

<ion-content class="no-scroll">

in your scss file:
.no-scroll .scroll-content {
overflow: hidden;


try this

page-welcome-slide {

  // scroll content
 .slide-zoom {
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;

  // space for swiper-pagination
  .swiper-wrapper {
    height: 95%;


1 Like

I have solved this issue with this simple css:

ion-slides { height: initial; }


Thank you, @Albertos, your solution was the one who worked the best for me!!

I’ve been struggling with this for 3 days!



Simone’s solution seems to work great!
@alexandretok and @Albertos
as i could see using the ion-slides { height: initial; } is a problem if you have different slide sizes

1 Like

but you can use auto

ion-slide {
    overflow-y: auto;
    display: block;

Want to let you all know that I solved it by setting the height of the scroll:

   <h1>Top content here.</h1>
    <ion-scroll style="height: 200px"> 
      Scroll content here.

Simple enough fix for what I was going for.


I have solved this issue with
ion-slides { height: initial; }