In this article I will explain with an example, how to build a simple Image Slider (Carousel) in AngularJS.
This article will illustrate how to use the AngularJS $interval function to dynamically change the SRC attribute of Image element at periodic intervals.
 
 
Image Slider (Carousel) in AngularJS
The below HTML Markup consists of an HTML DIV to which ng-app and ng-controller AngularJS directives have been assigned.
The HTML DIV consists of an HTML Image and SPAN element.
Note: If you want to learn more about these directives, please refer my article Introduction to AngularJS.
 
Inside the Controller, an array of JSON objects is created and assigned to the Customers JSON array.
Each JSON object consists of the Customer Id, Name and Photo fields. The Photo field stores the URL of the Image.
The AngularJS $interval function is used to dynamically change the SRC attribute of Image element at periodic intervals.
Note: If you want to learn more about $interval function, please refer my article AngularJS $interval example.
Based on the value of Index, an object is fetched from the Array and is assigned to the Customer variable.
Finally, the Name is assigned to the HTML SPAN element and the Photo value is assigned to the ng-src directive of the Image element.
<html>
<head>
   <title></title>
</head>
<body>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', [])
        app.controller('MyController', function ($scope, $interval) {
            $scope.Customer = null;
            $scope.Customers = [
                    { CustomerId: 1, Name: "John Hammond", Photo: "Images/1.jpg" },
                    { CustomerId: 2, Name: "Mudassar Khan", Photo: "Images/2.jpg" },
                    { CustomerId: 3, Name: "Suzanne Mathews", Photo: "Images/3.jpg" },
                    { CustomerId: 4, Name: "Robert Schidner", Photo: "Images/4.jpg" }
                   ];
 
            //Index is initialized to 0.
            var index = 0;
 
            //The Interval function.
            $interval(function () {
                //The Customer object is fetched and assigned to variable.
                $scope.Customer = $scope.Customers[index];
                $scope.$apply();
 
                //Index is incremented.
                index++;
 
                //Index is again set to 0 if it exceeds the Array length.
                if (index > $scope.Customers.length - 1) {
                    index = 0
                }
            }, 1000);
        });
    </script>
    <div ng-app="MyApp" ng-controller="MyController">
        <img ng-src="{{Customer.Photo}}" style="height: 100px; width: 100px" />
        <br />
        <span>{{Customer.Name}}</span>
    </div>
</body>
</html>
 
 
Screenshot
Simple Image Slider (Carousel) in AngularJS
 
 
Browser Compatibility

The above code has been tested in the following browsers.

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Demo
View Demo
 
 
Downloads
Download Code