Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Steps to create image carousel by using angularjs

2,121 views

Published on

Steps to create image carousel by using angularjs

Published in: Software
  • Login to see the comments

  • Be the first to like this

Steps to create image carousel by using angularjs

  1. 1. 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>" +
  2. 2. "<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); } };
  3. 3. scope.nextImage = function () { if(!scope.isNextBtnDisabled){ scope.currentIndex++; scope.isNextBtnDisabled=(scope.currentIndex ==scope.photos.length-1); scope.isPrevBtnDisabled=(scope.currentIndex <=0) } } } 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;
  4. 4. 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",[]);
  5. 5. 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>" +
  6. 6. "<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.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); scope.isPrevBtnDisabled=(scope.currentIndex <=0) } } } } }); </script> </body> </html>
  7. 7. References https://docs.angularjs.org/guide/directive https://egghead.io/lessons/angularjs-first-directive https://egghead.io/lessons/angularjs-understanding-isolate-scope

×