How to make a carousel of several pictures?

Question

Angular

The mean.js framework is used, a carousel with one slide is implemented,
here is the view code

<uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides">
        <uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id">
          <img ng-src="{{slide.image}}" style="margin:auto;">
        </uib-slide>
      </uib-carousel>

controller code

angular.module('core').controller('HomeController', ['$scope', 'Authentication',
  function ($scope, Authentication) {
    // This provides Authentication context.
    $scope.authentication = Authentication;

    $scope.myInterval = 1500;
    $scope.noWrapSlides = false;
    var slides = $scope.slides = [];
    var currIndex = 0;

    for (var i = 1; i < 4; i++) {
      slides.push({
        image: '/modules/core/client/img/sliders/'+i+'.jpg',
        id: currIndex++
      });
    }
  }
]);

The question is, how can I make it like this example?
example

Answer 1

Maybe someone will come in handy, I decided as follows
view

<uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides">
          <uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id">
            <div ng-if="slide.id==slides.length-2">
              <img ng-src="{{slide.image}}">
              <img ng-src="{{slides[$index+1].image}}">
              <div class="imgg"></div>
            </div>
            <div ng-if="slide.id==slides.length-1">
              <img ng-src="{{slide.image}}">
              <div class="imgg"></div>
              <div class="imgg"></div>
            </div>
            <div ng-if="(slide.id != slides.length-1) && (slide.id != slides.length-2)">
              <img ng-src="{{slide.image}}">
              <img ng-src="{{slides[$index+1].image}}">
              <img ng-src="{{slides[$index+2].image}}">
            </div>
          </uib-slide>
        </uib-carousel>