<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 

    <title>Title</title>

    <link href="https://code.ionicframework.com/nightly/css/ionic.min.css" rel="stylesheet">
    <script src="https://code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
  </head>
  <body ng-controller="AppCtrl">

    <ion-header-bar type="bar-positive">
      <h1 class="title">Title</h1>
    </ion-header-bar>

    <ion-content has-header="true">
      <ion-slide-box show-pager="false" on-slide-changed="slideChanged()">

        <ion-slide>
          <div>
            <h1>Blue height: 1000px</h1>
            <div class="box1" ng-if="data.currSlide === 0 || !data.currSlide"></div>
          </div>
        </ion-slide>

        <ion-slide>
          <div>
            <h1>Red height: 400px</h1>
            <div class="box2" ng-if="data.currSlide === 1"></div>
          </div>
        </ion-slide>

        <ion-slide>
          <div>
            <h1>Green height: 1200px</h1>
            <div class="box3" ng-if="data.currSlide === 2"></div>
          </div>
        </ion-slide>

      </ion-slide-box>
    </ion-content>

  </body>
</html>


.box1{
  height:1000px;
  background:blue;
}
.box2{
  height:400px;
  background:red;
}
.box3{
  height:1200px;
  background:green;
}
angular.module('ionicApp', ['ionic'])

.controller("AppCtrl", function($scope, $timeout, $ionicSlideBoxDelegate, $ionicScrollDelegate) {
  $scope.data = {};
  $scope.data.currSlide = $ionicSlideBoxDelegate.currentIndex();
  console.log('Current Slide = ' + $scope.data.currSlide);

  $scope.slideChanged = function() {
    
    $ionicScrollDelegate.scrollTop();
    $scope.data.currSlide = $ionicSlideBoxDelegate.currentIndex();
    console.log('the slide changed to : ' + $scope.data.currSlide);
    
    $timeout( function() {
      $ionicScrollDelegate.resize();
    }, 50);
    
  };
})
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.