Steps to create image carousel by using angularjs

Steps to create image carousel by using angularjs
Step 1:
Create html template for image carousel. It should contain image holder and two buttons to navigate to next and previous image.
<div class='{{ class }}'>
<div class='title'>{{title}}</div>
<div class='previous'> <button ng-click='prevImage()' ng-disabled='isPrevBtnDisabled' id='prevBtn'><</button>
</div>
<div class='photo-container'><img ng-src='{{photos[currentIndex]}}' class='photo'/>
</div>
<div class='next' > <button ng-click='nextImage()' ng-disabled='isNextBtnDisabled' id='nextBtn'> > </button>
</div>
</div>
Step 2:
Create Directive with template created in step 1
app.directive("imageCarousel",function() {
return {
restrict: "E",
template: "<div class='{{ class }}'>" +
"<div class='title'>{{title}}</div>" +
"<div class='previous'> <button ng-click='prevImage()' ng- disabled='isPrevBtnDisabled' id='prevBtn'><</button> " +
"</div>" +
"<div class='photo-container'><img ng-src='{{photos[currentIndex]}}' class='photo'/>" +
"</div>" +

"<div class='next' > <button ng-click='nextImage()' ng- disabled='isNextBtnDisabled' id='nextBtn'> > </button> " +
"</div>" +
"</div>",
link: function (scope, element, attr) {
}
}
}
);
Step 3:
Add event handlers to buttons and declare the variables to bind the data.
scope: {
photos: "=",
title: "@",
currentIndex: "@",
class:"@"
}
link:function(scope,element,attr){
scope.isPrevBtnDisabled=(scope.currentIndex <= 0);
scope.isNextBtnDisabled=(scope.currentIndex == scope.photos.length-1);
var prevBtn=element.find('prevBtn');
var nextBtn=element.find('nextBtn');
scope.prevImage = function () {
if(!scope.isPrevBtnDisabled){
scope.currentIndex--;
scope.isPrevBtnDisabled=(scope.currentIndex <=0)
scope.isNextBtnDisabled=(scope.currentIndex==scope.photos.length-1);
}
};

scope.nextImage = function () {
if(!scope.isNextBtnDisabled){
scope.currentIndex++;
scope.isNextBtnDisabled=(scope.currentIndex ==scope.photos.length-1);
}
}
}
Full Code
<!DOCTYPE html>
<html ng-app="mainModule">
<head lang="en" >
<meta charset="UTF-8">
<title></title>
<style>
.container{
position: absolute;
border: 1px;
float:left;
position: relative;
}
.container .title {
font-size: 15px;
font-style:italic;
}
.container .previous {
background-color:transparent;
float:left;

position: relative;
}
.container .next{
background-color:transparent;
float:left;
position: relative;
}
.container .photo-container{
float:left;
position: relative;
}
.container .photo-container .photo {
width:400px;
height:400px;
}
</style>
</head>
<body ng-controller="mainController">
<div>
<image-carousel photos="images" title="Image Carousel Instance 1" current-index="2" class="container"/>
</div>
<div>
<image-carousel photos="images" title="Image Carousel Instance 2" current-index="2" class="container"/>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script>
var app=angular.module("mainModule",[]);

app.controller("mainController",function($scope,$document){
$scope.images=["http://www.hdwallpapers.in/walls/blue_eyes_cute_baby-wide.jpg",
"http://cdn.sheknows.com/articles/2012/05/sarah_parenting/baby-surprise.jpg",
"http://parentsware.com/wp-content/uploads/2014/03/LovelyBaby.jpg",
"http://www.hamptonsbabygear.com/wp-content/uploads/wpsc/category_images/Happy- Baby-Photo.jpg",
"http://www.gurubaltirestaurant.com/wp-content/uploads/2014/01/cute-baby-face-girl- hd-wallpaper2.jpg",
"http://static.guim.co.uk/sys- images/Guardian/Pix/pictures/2014/2/14/1392395372829/Baby-drinking-milk-from-a-011.jpg"];
});
app.directive("imageCarousel",function() {
return {
restrict: "E",
scope: {
photos: "=",
title: "@",
currentIndex: "@",
class:"@"
},
template: "<div class='{{ class }}'>" +
"<div class='title'>{{title}}</div>" +
"<div class='previous'> <button ng-click='prevImage()' ng-disabled='isPrevBtnDisabled' id='prevBtn'><</button> " +
"</div>" +
"<div class='photo-container'><img ng-src='{{photos[currentIndex]}}' class='photo'/>" +
"</div>" +

"<div class='next' > <button ng-click='nextImage()' ng-disabled='isNextBtnDisabled' id='nextBtn'> > </button> " +
"</div>" +
"</div>",
link:function(scope,element,attr){
scope.isPrevBtnDisabled=(scope.currentIndex <= 0);
scope.isNextBtnDisabled=(scope.currentIndex == scope.photos.length-1);
var prevBtn=element.find('prevBtn');
var nextBtn=element.find('nextBtn');
scope.prevImage = function () {
if(!scope.isPrevBtnDisabled){
scope.currentIndex--;
scope.isNextBtnDisabled=(scope.currentIndex==scope.photos.length-1);
}
};
scope.nextImage = function () {
if(!scope.isNextBtnDisabled){
scope.currentIndex++;
scope.isNextBtnDisabled=(scope.currentIndex ==scope.photos.length-1);
}
} }
} });
</script>
</body>
</html>

References
https://docs.angularjs.org/guide/directive
https://egghead.io/lessons/angularjs-first-directive
https://egghead.io/lessons/angularjs-understanding-isolate-scope

Steps to create image carousel by using angularjs

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Steps to create image carousel by using angularjs

Similar to Steps to create image carousel by using angularjs (20)

Recently uploaded

Recently uploaded (20)

Steps to create image carousel by using angularjs