Tuesday, April 4, 2017

How to make image slider in AngularJS from scratch

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.