Angular JS + Bootstrap Responsive Image Carousel

As a part of first entry into developing web content using the Angular JS and Bootstrap frameworks, I have written a basic Image Carousel Image Slider that is responsive.

This example is a modified version of Responsive Image Carousel using Angular JS and Bootstrap written by the team from www.cssscript.com. I also referred to the w3schools page dedicated to the Bootstrap frameworks Carousel plugin.

Here is a link to my variation of this Responsive Image Carousel located here.

My goal is to implement this image slider in to a test page that I developing as apart of my UI portfolio that I am creating located here.

Sample Code

The following code can be copied and pasted into a new html document and it should work. The only change that will need to be done is downloading of the 3 slides from here and extract the images folder directly into the folder that the htiml folder is saved in.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Responsive Image Carousel with Angular.js</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>
.carousel-inner img { margin: 0 auto; }
.slides { width: 100%;}
</style>
</head>

<body>
<h1 style="margin-top:150px; margin-bottom:50px" align="center">Responsive Image Carousel with Angular.js</h1>
<div ng-app="carousel">
 <div class="container" ng-controller="imageCtrl"> 
 
 <!-- Carousel ================================================== -->
 
 <div id="myCarousel" class="carousel slide" data-ride="carousel"> 
 
 <!-- Dot Indicators and Image Selectors -->
 <ol class="carousel-indicators">
 <li data-target="#myCarousel" ng-repeat="img in slides" ng-class="{active : (img.index === 1)}" data-slide-to="{{img.index-1}}"></li>
 </ol>
 
 <!-- Images to be displayed -->
 <div class="carousel-inner">
 <div ng-class="{item: true, active : (img.index === 1)}" ng-repeat="img in slides"> <img ng-src="{{img.image}}" alt="Slide numder {{img.index-1}}" class="slides">
 <div class="container">
 <div class="carousel-caption"> </div>
 </div>
 </div>
 </div>
 
 <!-- Arrow control buttons to slide to the next or previous image -->
 <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
 
 </div>
 
 <!-- /.carousel --> 

 </div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
<script src='http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js'></script> 
<script>
var app = angular.module('carousel', []);
app.controller('imageCtrl', function ($scope) {
 
 $scope.slides = [
 
 {index:1, name:'Slide 1', image:'images/slider-image1.jpg'},
 {index:2, name:'Slide 2', image:'images/slider-image2.jpg'},
 {index:3, name:'Slide 3', image:'images/slider-image3.jpg'}
 
 ];
});
</script>
</body>
</html>

The Angular JS script breakdown

The Angular module is declared and called ‘carousel’ and is assigned to the variable called ‘app’.

The app controller is then declared and is called ‘imageCtrl’ with a variable called $scope added as an argument of the controllers function.

‘imageCtrl’ simply has a dictionary array that holds the information that is to be called from with in the html tags.

<script>
var app = angular.module('carousel', []);
app.controller('imageCtrl', function ($scope) {
 
 $scope.slides = [
 
 {index:1, name:'Slide 1', image:'images/slider-image1.jpg'},
 {index:2, name:'Slide 2', image:'images/slider-image2.jpg'},
 {index:3, name:'Slide 3', image:'images/slider-image3.jpg'}
 
 ];
});
</script>

 

The Angular JS extending the html tags

A Angular JS app needs to be called. In the case of this script, it has been declared on the first div tag, just under the body tag.

<body>
<h1 style="margin-top:150px; margin-bottom:50px" align="center">Responsive Image Carousel with Angular.js</h1>
<div ng-app="carousel">

It is important to note, from experience, only one Angular JS app can run on one page, so it is important to declare the app on a html tag that encompasses all the Angular JS data.

The Angular JS controller also needs to be called and this seems to need to be on a child html tag to the app.

<body>
<h1 style="margin-top:150px; margin-bottom:50px" align="center">Responsive Image Carousel with Angular.js</h1>
<div ng-app="carousel">
 <div class="container" ng-controller="imageCtrl"> 

The carousel indicators or dots in the bottom middle of the carousel requires the ng-repeat function to be called. They are the <li> tags. A loop is then declared where the img variable is declared, which will loop through the slides dictionary array. The img variable will contain all the data associated with each sub dictionary array.

The ng-class will assign a CSS active class to the first <li> tag that has an index value equaling 1.

The data-slide-to assigns a integer value that refers to the index of the slides dictionary array. Because arrays begin a the value 0, I had to make the index value to minus 1, therefore the first item in the dictionary array (0), will be ‘index:1’.

<li data-target="#myCarousel" ng-repeat="img in slides" ng-class="{active : (img.index === 1)}" data-slide-to="{{img.index-1}}"></li> 

This same pattern is repeated in the section where the images are displayed.  The ng-src is the Angular JS equivalent to the html img tags src property.

<div ng-class="{item: true, active : (img.index === 1)}" ng-repeat="img in slides"> <img ng-src="{{img.image}}" alt="Slide numder {{img.index-1}}" class="slides">

In the section where the left and right control arrows are defined, the role is defined as a button and data-slide action is called. These are direct calls from the Angular JS core framework.

<!-- Arrow control buttons to slide to the next or previous image -->
 <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a> 

The Bootstrap framework is applied with the creation of such content the left and right controller arrows, defined by the css classes “glyphicon” “glyphicon-chevron-left”.