Ion-slides is shown in the view only if ion-content scroll="false"

ionic-v1
1

I need a scrollable page with ion-slides, If i set scroll=true, in ion-content the slider is not shown on the page. I’m running ionic 1.3.1 and using the new ion-slide directive. This is my code,

 <ion-content class="padding" scroll="false">
    
    <div class="list card">
      <div class="item no-padding">
        <img class="full-image" src="http://12.jpg">
      </div>

     
      <div class="item ">
         <button  class="button  icon-left ion-android-navigate  button-stable">Directions </button>
         <button  class="button  icon-left ion-ios-telephone  button-stable">Call </button>
         <button  class="button  icon-left ion-android-share-alt  button-stable">Share</button>
      </div>
    </div>

    
     <div class="slide-wrapper1">
        <ion-slides  options="options" slider="data.slider">
          <ion-slide-page>
            <img src="http://placehold.it/375x468/">
          </ion-slide-page>
          <ion-slide-page>
            <img src="http://placehold.it/375x468/0000">
          </ion-slide-page>
          <ion-slide-page>
            <img src="http://placehold.it/375x468/">
          </ion-slide-page>
        </ion-slides>
      </div>
    

    <h4>About </h4>
    <div class="card">
      <div class="item item-text-wrap">
        This is a basic Card which contains an item that has wrapping text.
      </div>
    </div>
</ion-content>

what am i doing wrong, How do i get the ion-slides to work in a scrollable page?

Thanks for any help

2

I’m having a similar issue. My content is separated into 3 sections and I use a subheader to actually switch between them. I suppose I could just ditch the slides altogether, but I really like the way it looks to the end user.

It works perfectly as you mentioned until you set it to “true” and then I get no content at all. Have you figured this out yet? Can’t seem to find anything on the Swiper API which would help either.

3

I’m facing this exact issue right now – did you manage to find a workaround?

4

No I sure haven’t. I moved on to another part of the app in hopes a reply would come back.

I’m a little surprised more people haven’t come across this. Even if incredibly large streams of data aren’t the intended use of this component, I still think it would be a huge assumption that every person who is using a slider would have all of the data contained inside of the viewable area, but maybe that is exactly what the intent is.

I just posted a forum question on the Swiper Forum (http://idangero.us/swiper/forum/#!/?No Scrolling) so maybe you can post on that question as well and see if we get an answer.

If I don’t get an answer soon, I may have to just ditch the slider and go to just normal views, but that is really sad considering the old slidebox worked just fine with scrollable content inside of it.

Ionic? Any thoughts or potential solutions for us here?

5

I wanted to have an image slider on top the item details page, for my specific use case the below workaround worked. I wrapped the ion-content inside another ion-content and a place holder image to prevent content from overlapping.

<ion-content >    
  <ion-content  scroll="false">
    <ion-slides  options="options" slider="data.slider" class="height-40">
      <ion-slide-page ng-repeat="image in images">
         <img ng-src="{{image.url}}" >
      </ion-slide-page>
    </ion-slides>
  </ion-content>
  <!-- using as a place holder to make sure other content doesnt go behind the slider cz slider doesn't work if scroll is true -->
  <div class="height-40" > 
     <img ng-src="img/loading365x240.png" width=100%;>
  </div>
</ion-content>

Hope it helps :slight_smile: