Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
Steps to create image carousel by using angularjs 
Step 1: 
Create html template for image carousel. It should contain ima...
"<div class='next' > <button ng-click='nextImage()' ng- disabled='isNextBtnDisabled' id='nextBtn'> > </button> " + 
"</div...
scope.nextImage = function () { 
if(!scope.isNextBtnDisabled){ 
scope.currentIndex++; 
scope.isNextBtnDisabled=(scope.curr...
position: relative; 
} 
.container .next{ 
background-color:transparent; 
float:left; 
position: relative; 
} 
.container ...
app.controller("mainController",function($scope,$document){ 
$scope.images=["http://www.hdwallpapers.in/walls/blue_eyes_cu...
"<div class='next' > <button ng-click='nextImage()' ng-disabled='isNextBtnDisabled' id='nextBtn'> > </button> " + 
"</div>...
References 
https://docs.angularjs.org/guide/directive 
https://egghead.io/lessons/angularjs-first-directive 
https://eggh...
Próxima SlideShare
Cargando en…5
×

Steps to create image carousel by using angularjs

Steps to create image carousel by using angularjs

  • Inicia sesión para ver los comentarios

  • Sé el primero en recomendar esto

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

×