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:"#"};});위는 AngularJS의 구현 슬라이드 정보입니다. 우리는 미래에 관련 지식을 계속 조직 할 것입니다. 이 사이트를 지원 해주셔서 감사합니다!