Préface
JQuery s'est développé à ce jour, et les composants de diapositive sont très matures, donc l'éditeur suivant vous emmènera pour jeter un œil aux étapes pour utiliser AngularJS pour obtenir des effets de diapositive.
Installation de NPM
NPM Installer AngularJsslider
Comment utiliser
Étape 1 (Introduction)
require ('angularjsslider') (modulename); // introduireÉtape 2 (configuration des paramètres)
| taper | illustrer | |
| données | Tableau | Données d'image de diapositives [{img: "1.jpg", lien: '#'} ...] |
| minuteur | Nombre | Timer intervalle du commutateur de diapositives = "2" |
| btn-left | Chaîne | bouton à bascule gauche btn-left = "# btnleft" |
| btn-droit | Chaîne | Bouton à bascule btn-droite = ". Btnright" |
| type animé | Chaîne | Mode d'animation Switch Animate-Type = "Facilité" |
| temps animé | Chaîne | Switch Animation Time Animate Time = "1.0" secondes |
Étape 3 (étiquette d'insertion)
<slider> </lider> // insérer la balise HTML
<div ng-controlller = "firstctrl"> <slider timer = "2" data = "data" btn-left = "# btnleft" btn-right = ". btnright" animate-type = "facilit" animate-time = "1.0"> </ slider> <div id = "btnleft"> </ div> <v> </ div> </ div>
var mymodule = angular.module ('myApp', []); MyModule.Controller ('FirstCtrl', fonction ($ Scope) {$ scope.data = [{img: "../img/1.jpg" ,link:"#"}];});Résumer
Ce qui précède est l'intégralité du contenu de cet article. J'espère que cet article sera utile à tout le monde. Si vous avez des questions, vous pouvez laisser un message pour communiquer.