You can check out the bare minimum bootstrap carousel from the latest bootstrap site: http://getbootstrap.com/javascript/#carousel
The next step is getting this into a bare minimum AngularJS directive, which as it turns out is really simple.
Links
Since Bootstrap requires jQuery for the carousel component, you’ll need the latest version of jQuery: https://code.jquery.com/jquery-2.1.4.js.
Also add the necessary links from Bootstrap: http://getbootstrap.com/getting-started/#download
Carousel Directive
app.directive('carousel', function($timeout) {
return {
restrict: 'E',
scope: {
links: '='
},
templateUrl: 'carousel.html',
link: function(scope, element) {
$timeout(function() {
$('.carousel-indicators li',element).first().addClass('active');
$('.carousel-inner .item',element).first().addClass('active');
});
}
}
});
According to Bootstrap’s documentation:
Initial active element required
The .active class needs to be added to one of the slides. Otherwise, the carousel will not be visible.
In order to add the .active class after rendering, we use $timeout within the link function.
Carousel.html
This is basically a copy of the HTML provided by Bootstrap which has been modified with ngRepeat and ngSrc to make it dynamic:
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li ng-repeat="link in links" data-target="#carousel-example-generic" data-slide-to="{{$index}}"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item" ng-repeat="link in links">
<img ng-src="{{link.src}}" alt="{{link.src}}">
<div class="carousel-caption">
{{link.caption}}
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Usage
To use the directive, initialize a list of links in a controller:
app.controller('ctrl', function($scope) {
$scope.links =[
{ src:"http://www.conceptcarz.com/images/Suzuki/suzuki-concept-kizashi-3-2008-01-800.jpg", alt:"", caption:""},
{ src:"http://www.conceptcarz.com/images/Volvo/2009_Volvo_S60_Concept-Image-01-800.jpg", alt:"", caption:""},
{ src:"http://www.sleepzone.ie/uploads/images/PanelImages800x400/TheBurren/General/sleepzone_hostels_burren_800x400_14.jpg", alt:"", caption:""},
];
});
Add the directive to your view and pass in the links model that you defined in your controller earlier:
<body ng-controller="ctrl">
<div style="width:800px; height: 400px">
<carousel links="links"></carousel>
</div>
</body>
Note: The inline style is necessary to ensure that the image size takes up the entire canvas. There may be better ways to do this – consult Bootstrap.