To create slider with angular UI, carousel is used as it is same as bootstrap's image carousel. But It also supports swiping in the touch devices. ngTouch is used to enable the swiping in the touch devices. We have to load ngTouch module as a dependency.

Syntax:
 

<uib-carousel>
    <uib-slide></uib-slide>
</ uib-carousel>

uib-carousel has the following attributes:

* active - It defines the Index value of current active slide It is by default of first slide.
* interval - It is the time period between the two slides to show.
* no-pause - If its value is true it will disable the pause on mouseover.
* no-transition - If its value is true it will disable the transition.
* no-wrap - It will disable the looping of slides if true.

* template-url - If template would be used on the component.

Example:

HTML:

<div ng-controller="CarouselCtrl">
    <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}}" class=img-responsive>
        <div class="carousel-caption">
          <h4>Slide {{slide.id}}</h4>
          <p>{{slide.text}}</p>
        </div>
      </uib-slide>
    </uib-carousel>
  </div>

JavaScript:

angular.module('ui.bootstrap.demo').controller('CarouselCtrl', function ($scope) {
  $scope.myInterval = 5000;
  $scope.noWrapSlides = false;
  $scope.active = 0;
  var slides = $scope.slides = [];
  var currIndex = 0;

$scope.addSlide = function() {
    var newWidth = 600 + slides.length + 1;
    slides.push({
      image: 'http://lorempixel.com/' + newWidth + '/300',
      text: ['Nice image','Awesome photograph','That is so cool','I love that'][slides.length % 4],
      id: currIndex++
    });
  };

for (var i = 0; i < 4; i++) {
    $scope.addSlide();
  }
});