Hi, I hope you like angular and seeking to make an image slider, right? I will show you how to make image slider in AngularJS from scratch.
I was searching for a good slider in AngularJS that will be able to show my products with three images in a row or carousal but one image in the middle will be some bigger or some different style look. I did not find proper library that can meet my exact need. Finally, I decided to make the slider from scratch that will fulfill my requirements.
I will share with you the tricky ways in AngularJS that I followed to make the slider. You can also make your own slider if you can understand my tricky rules. That's actually very easy thing when you know JavaScript well and set necessary algorithm. I will make a slider that will display three image in a row and will pass by one image when click on next or previous and it will come the next images repeated after it finishes the view. The slider will look like the following.
I have followed a basic project structure for angular slider project. Here is my folder and files structure.
Index.html file contains the necessary files and library links. I am using angularjs@1.5.8 version for this tutorial. The index file code is here:
Angular main app module is defined in app.js file. The code of app.js file is here :
Controller.js file contains main logical part of the slider. This file contains the basic object of images and two function next() and prev(). These two functions mainly represent the slider method for next image loading and prev function works for previous image loading. The controller codes are here :
This is a very simple slider method in AngularJS. My code is designed for displaying three images repeatedly for other images. Here vm.items hold the images. You can style the look for the slider as you need. You can follow this tutorial when you will need to make something from own to meet the requirements.
This looks almost static for display parts; but dynamic for previous and next function. You can add more images as you need in the image object. If you need to add three more image in the display you will need to customize the functions. I think this article can help you when you don't want to add extra slider library or modules. You can keep you project clean and simple.
If You have any query about this article and need any more clarification, you can write me in the comment bellow. You can get the whole source code with demo preview in this link 👉 Click Here.
I was searching for a good slider in AngularJS that will be able to show my products with three images in a row or carousal but one image in the middle will be some bigger or some different style look. I did not find proper library that can meet my exact need. Finally, I decided to make the slider from scratch that will fulfill my requirements.
I will share with you the tricky ways in AngularJS that I followed to make the slider. You can also make your own slider if you can understand my tricky rules. That's actually very easy thing when you know JavaScript well and set necessary algorithm. I will make a slider that will display three image in a row and will pass by one image when click on next or previous and it will come the next images repeated after it finishes the view. The slider will look like the following.
I have followed a basic project structure for angular slider project. Here is my folder and files structure.
Index.html file contains the necessary files and library links. I am using angularjs@1.5.8 version for this tutorial. The index file code is here:
<!DOCTYPE html> <html ng-app="app"> <head> <script data-require="angularjs@1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script> <link rel="stylesheet" href="style.css" /> <script src="app.js"></script> <script src="controller.js"></script> </head> <body ng-controller="HelloController as vm"> <h1>Hello Repeated Angular Slider!</h1> <div> <button ng-click="vm.prev()">Prev</button> <button ng-click="vm.next()">Next</button> <br /> <br /> <img src="{{vm.items[PrevSlideIndex].img}}" width="150" /> <img src="{{vm.items[CurrentSlideIndex].img}}" width="200" /> <img src="{{vm.items[NextSlideIndex].img}}" width="150" /> </div> </body> </html>
Angular main app module is defined in app.js file. The code of app.js file is here :
// Defining main app module (function() { 'use strict'; angular.module('app', []); })();
Controller.js file contains main logical part of the slider. This file contains the basic object of images and two function next() and prev(). These two functions mainly represent the slider method for next image loading and prev function works for previous image loading. The controller codes are here :
// Controller Code goes here (function() { 'use strict'; angular.module('app').controller('HelloController', HelloController); HelloController.$inject = ['$scope' ]; /* @ngInject */ function HelloController($scope) { var vm = this; vm.items = [ { img: "http://py.processing.org/tutorials/pixels/imgs/tint1.jpg" }, { img: "http://res.cloudinary.com/demo/image/upload/w_200,h_200,c_crop,g_center/fat_cat.jpg" }, { img: "https://s-media-cache-ak0.pinimg.com/236x/40/71/65/40716595ab2887a97df995ad03c7b45c.jpg" }, { img: "https://learn.getgrav.org/images/2/2/6/a/f/226af113459c3754a5406275975abd1019d33c73-sample-image.jpeg" }, { img: "http://demo.cloudimg.io/s/crop/200x200/sample.li/boat.jpg" }, { img: "http://s3-us-west-2.amazonaws.com/images.eviesays.com/venue/6582945/5492856_1_detail.jpg" }, { img: "http://s3-us-west-2.amazonaws.com/images.eviesays.com/event/2430567/7650342_1_detail.jpg" } ]; $scope.CurrentSlideIndex = 0; $scope.PrevSlideIndex =vm.items.length -1; $scope.NextSlideIndex = $scope.CurrentSlideIndex +1; vm.next = function() { if (vm.items.length -1 ==$scope.CurrentSlideIndex+1) { $scope.CurrentSlideIndex =$scope.CurrentSlideIndex +1; $scope.PrevSlideIndex = $scope.CurrentSlideIndex -1; $scope.NextSlideIndex =0; } else if (vm.items.length - 1 ==$scope.CurrentSlideIndex) { $scope.CurrentSlideIndex = 0; $scope.PrevSlideIndex = vm.items.length -1; $scope.NextSlideIndex = $scope.CurrentSlideIndex +1; } else { $scope.CurrentSlideIndex = $scope.CurrentSlideIndex + 1; $scope.PrevSlideIndex = $scope.CurrentSlideIndex -1; $scope.NextSlideIndex = $scope.CurrentSlideIndex +1; } } vm.prev = function() { if ($scope.CurrentSlideIndex - 1 === 0) { $scope.CurrentSlideIndex =$scope.CurrentSlideIndex -1; $scope.PrevSlideIndex = vm.items.length -1; $scope.NextSlideIndex = $scope.CurrentSlideIndex +1; } else if ($scope.CurrentSlideIndex === 0){ $scope.CurrentSlideIndex = vm.items.length -1; $scope.PrevSlideIndex = $scope.CurrentSlideIndex - 1; $scope.NextSlideIndex = 0; } else { $scope.CurrentSlideIndex = $scope.CurrentSlideIndex -1; $scope.PrevSlideIndex = $scope.CurrentSlideIndex - 1; $scope.NextSlideIndex = $scope.CurrentSlideIndex +1; } } } })();
This is a very simple slider method in AngularJS. My code is designed for displaying three images repeatedly for other images. Here vm.items hold the images. You can style the look for the slider as you need. You can follow this tutorial when you will need to make something from own to meet the requirements.
This looks almost static for display parts; but dynamic for previous and next function. You can add more images as you need in the image object. If you need to add three more image in the display you will need to customize the functions. I think this article can help you when you don't want to add extra slider library or modules. You can keep you project clean and simple.
If You have any query about this article and need any more clarification, you can write me in the comment bellow. You can get the whole source code with demo preview in this link 👉 Click Here.
No comments:
Post a Comment