머리말
JQuery는 오늘날까지 개발되었으며 슬라이드 구성 요소는 매우 성숙하므로 다음 편집자는 AngularJS를 사용하여 슬라이드 효과를 달성하는 단계를 살펴 보겠습니다.
NPM 설치
NPM angularjsslider를 설치하십시오
사용 방법
1 단계 (소개)
require ( 'angularjsslider') (modulename); // 소개
2 단계 (매개 변수 구성)
| 유형 | 설명 | |
| 데이터 | 정렬 | 슬라이드 그림 데이터 [{img : "1.jpg", 링크 : '#'} ...] |
| 시간제 노동자 | 숫자 | 슬라이드 스위치 간격 타이머 = "2" |
| Btn-left | 끈 | 왼쪽 토글 버튼 btn-left = "#btnleft" |
| Btn-Right | 끈 | 토글 버튼 btn-right = ". btnright" |
| 애니메이션 유형 | 끈 | 스위치 애니메이션 모드 Animate-Type = "Ease" |
| 애니메이션 시간 | 끈 | 애니메이션 시간 애니메이션 시간 = "1.0"초 |
3 단계 (태그 삽입)
<슬라이더> </slider> // html 태그 삽입
<div ng-controller = "FirstCtrl"> <슬라이더 타이머 = "2"data = "data"btn-left = "#btnleft"btn-right = ". btnright"animate-type = "animate-time ="1.0 "> </slider> <div id ="btnleft "> </div> </div> </div> </div> </div>
var myModule = Angular.Module ( 'myApp', []); myModule.controller ( 'FirstCtrl', function ($ scope) {$ scope.data = [{img : "../img/1.jpg",link:"#"};});요약
위는이 기사의 전체 내용입니다. 이 기사가 모두에게 도움이되기를 바랍니다. 궁금한 점이 있으면 의사 소통을 위해 메시지를 남길 수 있습니다.