显示空白幻灯片的angular.js平滑旋转木马

<div ng-app="carouselApp" ng-controller="carouselCtrl">
  <div class="carousel">
    <div class="slide" ng-repeat="slide in slides" ng-class="{active: slide.active}">
      <img ng-src="{{slide.image}}" alt="{{slide.caption}}">
    </div>
  </div>
</div>

.carousel {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.slide.active {
  opacity: 1;
}

angular.module('carouselApp', [])
  .controller('carouselCtrl', function($scope) {
    $scope.slides = [
      {image: 'image1.jpg', caption: 'Slide 1', active: true},
      {image: 'image2.jpg', caption: 'Slide 2', active: false},
      {image: 'image3.jpg', caption: 'Slide 3', active: false}
    ];
  });