Implementing sliders using Angular JS

It feels great when we implement something interesting and it’s such a pleasure to share that with you all. I hope this blog would help you in creating amazing things.

We use sliders in situations where we have lots of content but very small space to display that content. In this blog we will try to implement sliders using Angular JS scripting language.

Let’s start from the view of the slider which we are going to create:

Now let us see how we can do this:

Required:

Files used:	Type of file:	Purpose
Slider.js	JavaScript file	Implementing navigation arrows functionality
SliderView.html	HTML file	UI for slider
Style.css	Css file	Styles for elements

1. JAVASCRIPT FILE: ‘slider.js’ file.

Below code is intended for functioning of previous and next arrows. First of all we have to pushed images into the array. Then we have defined the working of previous and next arrow placed on the sides of slider. Indexing of array gets incremented or decremented depending on which arrow we have clicked. 

We have used slice function to slice our array of templates/images and then the sliced set is returned for display purpose. Slice function slices the array of images from its startindex and endindex and then returns it to the calling function.

 Using limit variable we have just shown one image at a time on the page. We can change that limit according to requirement.

Here is our code:-

app.controller ('maincontroller', function ($scope, $http)

{

  //variable initialization

    $scope.templateStartIndex = 0;

    $scope.templateEndIndex = 10;

    $scope.limitTemplate = 1;

    $scope.templates = [];

    $scope.isPrevious = false;

    $scope.isNext = false;

   //adding required images into array

    $scope.templates.push ("/Templates/slide1.jpg");

    $scope.templates.push ("/Templates/slide2.jpg");

    .

    .

    .

//function for showing next template/image

    $scope.ShowNextTemplate=function (limit)

    {

       

        $scope.isPrevious = false;

        $scope.isNext = true;

      

        if ($scope.templateStartIndex<$scope.templateEndIndex-limit)

        {

            $scope.templateStartIndex = $scope.templateStartIndex + 1;

//suppose we have pushed 10 images

            if ($scope.templateEndIndex<11) 

     {

                $scope.templateEndIndex=$scope.templateEndIndex+1;

            }

            if ($scope.templateEndIndex=10){}

//call to TemplateItems() for returning sliced set of images 

            $scope.TemplateItems();

        }

    }

    //function for showing previous template/image

    $scope.ShowPrevTemplate = function (limit) {

     

        $scope.isPrevious = true;

        $scope.isNext = false;

    

        if($scope.templateStartIndex>0){

            if($scope.templateStartIndex<=$scope.templateEndIndex-(limit-1)){

                $scope.templateStartIndex=$scope.templateStartIndex-1;

                $scope.templateEndIndex=$scope.templateEndIndex-1;

            }

            $scope.TemplateItems();

        }

    }

    //function for returning set of sliced templates

    $scope.TemplateItems=function()

    {

        return $scope.templates.slice($scope.templateStartIndex,   $scope.templateEndIndex);

    }

});

2. HTML FILE

Let’s say we have SliderView.html file

Below is the code.

<div class="content">

        <a class="slider-arrow left" >

            <img src="Images/arrow_left.png" ng-click="ShowPrevTemplate(1)"/>

        </a>

        <div class="slider-container">

            <span ng-repeat="template in TemplateItems() | limitTo:1">

     <img src="{{template}}" class="img-responsive" ng-class="{'slideright': isNext, 'slideleft':isPrevious}" id="slideimage"/>

            </span>

        </div>

        <a class="slider-arrow right" >

            <img src="Images/arrow_right.png" ng-click="ShowNextTemplate(1)" />

        </a>

    </div>

On Previous and Next arrow clicks we have called functions to get new image. We have used ng-repeat for looping through set of array elements. 

ng-repeat is the key behind this slider which gives us sliding effect. It calls TemplateItems () which returns the sliced set of images. Number of images which are returned after slicing depends upon the limit which we have set i.e. limitTo.

Secondly, ng-class directive is used to dynamically add classes to the image based on which arrow is clicked. If previous arrow is clicked then slideleft animation is applied and if next arrow is clicked then slideright animation class is applied. 

The following variables are used in the .js file to check the scenario:

 $scope.isPrevious and $scope.isNext. 

If the isPrevious variable is set true then slideleft animation is applied else slideright animation is applied and vice-versa to get a feel of sliding from left to right and right to left.

3. CSS CLASSES

slideleft and slideright classes are responsible for Animation effects.

.slideright

 {

  animation: animslide 1s ease-out;

 }

 @keyframes animslide 

 {

    0% 

    {

        transform: translateX(500px);

    }

    100% 

    {

        transform: translateX(0);

    }

  }

.slideleft

{

  animation: animslideleft 1s ease-out;

}

@keyframes animslideleft

{

    0% 

    {

        transform: translateX(-500px);

    }

    100% 

    {

        transform: translateX(0);

    }

}

.content

 {

  width: 100%;

  height: 100%;

  position: relative;

  overflow: hidden;

}

.slider-arrow 

{

    height: 64px;

    width: 64px;

    position: absolute;

    top: 45%;

    right: 0;

    cursor:pointer;

}

.slider-arrow img 

{

     width: 100%;

     height: 100%;

}

.slider-arrow.left 

{

    left: 0;

}

.slider-arrow.right

{

    right: 0;

}

Thank you friends.

I hope this will help you in implementing sliders using Angular JS!