Slides disappear when changing orientation of device

Question

I'm using an ion-slide-box to show some images. Everything works fine when I don't change the orientation of the device. If I do, the images sometimes disappear. Changing the orientation again makes them appear again.

HTML:

  <div class="outer" ng-if="!data.navbarHidden">
    <div class="middle">
      <div class="inner">
        <ion-slide-box show-pager="false" on-slide-changed="pageChanged($index)" active-slide="data.currentPageIndex" style="width: {{data.maxWidth}}px; height: {{data.maxHeight}}px;">
          <ion-slide ng-repeat="page in allPages">
            <img on-double-tap="onDoubleTap()" class="slideImage" ng-src="{{dataPath}}{{page.link}}" alt="{{page.title}}" on-swipe-left="onSwipeLeft()" on-swipe-right="onSwipeRight()"/>
          </ion-slide>
        </ion-slide-box>
      </div>
    </div>
  </div>

CSS:

outer {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}

.middle {
    display: table-cell;
    vertical-align: middle;
}

.inner {
    margin-left: auto;
    margin-right: auto;
}

.slideImage{
    position: absolute; 
    margin: auto; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    width:auto; 
    max-width:100%;
    max-height:100%; 
    height:auto;
    -webkit-backface-visibility:hidden;
}

Any idea why this happens or/and how I can fix this?

Answer 1

So I have used one of these in my mobile application and here is what I can answer:

1. The slider builds all the slides side by side when your application runs.
2. Each slide has its own properties to keep it to the right and left of its sibling slides. (Look at this picture)

As you can see each slide has a set width, left position, translation, etc.

3. When you change the device orientation the values that were set for each slide is still relative to the original orientation.

So what you can do is either put <preference name="orientation" value="portrait" /> in your config.xml file to prevent the landscape orientation from happening or you can try reloading the slide box when the orientation as changed using $ionicSlideBoxDelegate.update();