Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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...
Nächste SlideShare
Wird geladen in …5
×

Steps to create image carousel by using angularjs

Steps to create image carousel by using angularjs

  • Loggen Sie sich ein, um Kommentare anzuzeigen.

  • Gehören Sie zu den Ersten, denen das gefällt!

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

×