轮播不适用于幻灯片放映和angularjs中显示的3张图像

Question

我想通过幻灯片制作旋转木马，但在我的angularjs中，它们没有使用任何这种旋转木马，我尝试了更多。

这是我在html中使用的最后一种方法：

 <img ng-repeat="slide in slides" class="slide"     ng-hide="!isCurrentSlideIndex($index)" ng-src="{{slide.image}}">
<a class="arrow prev" href ng-click="nextSlide()"></a>
<a class="arrow next" href ng-click="prevSlide()"></a>
<nav class="nav">
    <div class="wrapper">
    <ul class="dots">
    <li class="dot" ng-repeat="slide in slides">
                        <a href ng-class="{'active':isCurrentSlideIndex($index)}"
                           ng-click="setCurrentSlideIndex($index);">{{slide.name}}</a></li>
    </ul></div>
    </nav>

和js：

  $scope.slides = [{
        index: 1,
        name: 'Slide 1',
        image: '../image/slide1.png'
      },
      {
        index: 2,
        name: 'Slide 2',
        image: '../image/slide2.png'
      },
      {
        index: 3,
        name: 'Slide 3',
        image: '../image/slide3.png'
      }

    ];
    $scope.currentIndex = 0;
    $scope.setCurrentSlideIndex = function (index) {
        $scope.currentIndex = index;
    };
    $scope.isCurrentSlideIndex = function (index) {
        return $scope.currentIndex === index;
    };
    $scope.prevSlide = function () {
        $scope.currentIndex = ($scope.currentIndex < $scope.slides.length - 1) ? ++$scope.currentIndex : 0;
    };
    $scope.nextSlide = function () {
        $scope.currentIndex = ($scope.currentIndex > 0) ? --$scope.currentIndex : $scope.slides.length - 1;
    };

  }])

  .run(['Carousel', (Carousel) => {
    Carousel.setOptions({
      arrows: true,
      autoplay: false,
      autoplaySpeed: 3000,
      cssEase: 'ease',
      dots: false,

      easing: 'linear',
      fade: false,
      infinite: true,
      initialSlide: 0,

      slidesToShow: 1,
      slidesToScroll: 1,
      speed: 500,
    });

这是我要制作的示例图片：

请有人可以帮助