Use Angularjs to achieve the slide effect,

Use Angularjs to achieve the slide effect,

Preface

Since the development of Jquery, the magic lamp components have become very mature. So let's take a look at the steps to achieve the slide effect using Angularjs.

Npm Installation

npm install angularjsSlider

Usage

Step 1 (Introduction)

Require ('angularjsslider') (moduleName); // Import

Step 2 (parameter configuration)

	Type	Description
Data	Array	Slide picture data [{img: "1.jpg", link: '#'}...]
Timer	Number	Slide switching interval timer = "2"
Btn-left	String	Switch button on the left btn-left = "# btnleft"
Btn-right	String	Switch button btn-right = ". btnright" on the right"
Animate-type	String	Animation switching mode animation-type = "Animation"
Animate-time	String	Animation switching time: animation-time = "1.0" seconds

Step 3 (insert tag)

<Slider> </slider> // insert html tags

<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:"#"}];  });

Summary

The above is all the content of this article. I hope this article will help you. If you have any questions, please leave a message.