Using Angularjs to realize slide effect _ANGULARJS

Objective

Since the development of jquery, the slideshow has been very mature, so here are a few steps to take a look at using ANGULARJS to achieve the slide effect.

NPM mode installation

NPM Install Angularjsslider

How to use

First Step (introduction)

Require (' Angularjsslider ') (modulename);

Step Two (parameter configuration)

	Type	Description
Data	Array	Slide picture data [{img: ' 1.jpg ', Link: ' # '} ...]
Timer	Number	Slide switch interval timer= "2"
Btn-left	String	Left toggle button btn-left= "#btnleft"
Btn-right	String	Right toggle button btn-right= ". Btnright"
Animate-type	String	Toggle Animation mode animate-type= "Ease"
Animate-time	String	Toggle Animation Time Animate-time= "1.0" seconds

Step three (insert label)

<slider></slider>//Insert HTML tag

<div class= "Sliderbox" ng-controller= "Firstctrl" >
    <slider timer= "2" data= "Data" btn-left= "#btnleft" Btn-right= ". Btnright" animate-type= "Ease" animate-time= "1.0" >
    </slider>
    <div class= "BTN left" Id= "Btnleft" ></div>
    <div class= "btn right Btnright" ></div>
  </div>

var mymodule = angular.module (' myApp ', []);
  Mymodule.controller (' Firstctrl ', function ($scope) {
    $scope. data = [{img:]. /img/1.jpg ", Link:" # "}];
  

Summarize

The above is the entire content of this article, I hope this article for everyone can help, if there are questions you can message exchange.