在离子的模态滑动框

Question

example.controller('AppCtrl', function($scope, $ionicModal) {
  $ionicModal.fromTemplateUrl('learn-modal.html', {
      scope: $scope,
      animation: 'fade-in-scale'
    }).then(function(modal) {
      $scope.modal = modal;
  });

  $scope.myActiveSlide = 0;

  $scope.openModal = function() {
    $scope.modal.show();
  };

  $scope.closeModal = function() {
    $scope.modal.hide();
  };

  $scope.myGoBack = function() {
    $ionicHistory.goBack();
  };

});

/* Modal */
.ion-nifty-modal {
    position: absolute;
    width: 100% !important;
    height: 50% !important;
    top: 15%;
    background-color: rgba(0, 0, 0, 0.5) ;
}

.modal-backdrop.active {
    background-color: rgba(0, 0, 0, 0) !important;
}

 <script id="learn-modal.html" type="text/ng-template">
    <ion-modal-view class="ion-nifty-modal">
      <div>
      <ion-content>
        <ion-slide-box>
          <ion-slide>
            <img src ="img/Episode/learn_more/ingredient/Text_ingredient.png" style = "width:50%; height:50%;">
          </ion-slide>
          <ion-slide>
            <img src ="img/Episode/learn_more/location/Text_location.png" style = "width:50%; height:50%;">
          </ion-slide>
        </ion-slide-box>
      </ion-content>
      </div>
    </ion-modal-view>
  </script>

您好，

我试图在离子上以模态制作一个幻灯片盒。

但它无法正常工作。

出现模态窗口。但是没有图像

并没有应用动画效果。

这是我的代码。

我该如何解决？

请帮帮我们。

谢谢。