부트 스트랩 회전 목마 (회전 목마) 위젯
회전 목마 (회전 목마) 플러그 - 인 부트 스트랩 사이트에 유연한 대응이 슬라이더 스타일의 방식을 추가 할 수 있습니다. 또한, 콘텐츠 화상 임베디드 프레임, 비디오 또는 배치 할 콘텐츠의 다른 유형이 될 수있을만큼 유연하다.
당신은 각각의 플러그인 기능을 참조하려면carousel.js를 참조 할 필요가있다.또는, 부트 스트랩 플러그인 개요 장에서는 언급, 당신은bootstrap.js또는bootstrap.min.js의압축 된 버전을 참조 할 수있습니다.
예
다음은 부트 스트랩 컨베이어 (컨베이어)를 사용하여 간단한 슬라이드 플러그인 공통 컴포넌트 고리 부재를 도시한다. 회전을 달성하기 위해서는, 해당 태그 코드를 추가 할 필요가있다. 데이터 속성을 사용할 필요는 단지 간단한 클래스 기반의 개발이 될 수 필요가 없습니다.
예
<사업부 ID = "myCarousel" 클래스 = "회전 목마 슬라이드">
<! - 회전 목마 (회전 목마) 인덱스 ->
<안녕, 클래스 = "회전 목마 - 지표">
<리 데이터 대상 = "#myCarousel" 데이터 슬라이드에 = "0 " 클래스 = "활성"> </ 리>
<리 데이터 대상 = "#myCarousel" 데이터 슬라이드에 = "1 "> </ 리>
<리 데이터 대상 = "#myCarousel" 데이터 슬라이드에 = "2 "> </ 리>
</ 올>
<! - 회전 목마 (회전 목마) 프로젝트 ->
<사업부 > 클래스 = "회전 목마 - 내부"
<사업부 > 클래스 = "항목 활성"
<IMG SRC = "/wp-content/uploads/2014/07/slide1.png" ALT = "첫 번째 슬라이드">
</ DIV>
<사업부 클래스 = "항목">
<IMG SRC = "/wp-content/uploads/2014/07/slide2.png" ALT = "두 번째 슬라이드">
</ DIV>
<사업부 클래스 = "항목">
<IMG SRC = "/wp-content/uploads/2014/07/slide3.png" ALT = "셋째 슬라이드">
</ DIV>
</ DIV>
<! - 회전 목마 (회전 목마) 탐색 ->
<A 클래스 = "회전 목마 제어는 왼쪽" HREF = "#myCarousel"
데이터 슬라이드 = "이전"> & lsaquo;
</ A>
<A 클래스 = "회전 목마 제어 권한" HREF = "#myCarousel"
데이터 슬라이드 = "다음"> & rsaquo;
</ A>
</ DIV>
»시도
결과는 다음과 같다 :
옵션 제목
당신은.item 내부 .carousel 캡션 요소에의해 슬라이드에 캡션을 추가 할 수 있습니다. 오직 당신 만이 자동으로 정렬 및 포맷 할 위치에 선택적 HTML을 배치해야합니다. 다음의 예는이 점을 보여
예
<사업부 ID = "myCarousel" 클래스 = "회전 목마 슬라이드">
<! - 회전 목마 (회전 목마) 인덱스 ->
<안녕, 클래스 = "회전 목마 - 지표">
<리 데이터 대상 = "#myCarousel" 데이터 슬라이드에 = "0 " 클래스 = "활성"> </ 리>
<리 데이터 대상 = "#myCarousel" 데이터 슬라이드에 = "1 "> </ 리>
<리 데이터 대상 = "#myCarousel" 데이터 슬라이드에 = "2 "> </ 리>
</ 올>
<! - 회전 목마 (회전 목마) 프로젝트 ->
<사업부 > 클래스 = "회전 목마 - 내부"
<사업부 > 클래스 = "항목 활성"
<IMG SRC = "/wp-content/uploads/2014/07/slide1.png" ALT = "첫 번째 슬라이드">
<사업부 클래스 = "회전 목마 캡션"> 제목 1 </ DIV>
</ DIV>
<사업부 클래스 = "항목">
<IMG SRC = "/wp-content/uploads/2014/07/slide2.png" ALT = "두 번째 슬라이드">
<사업부 클래스 = "회전 목마 캡션"> 제목이 </ DIV>
</ DIV>
<사업부 클래스 = "항목">
<IMG SRC = "/wp-content/uploads/2014/07/slide3.png" ALT = "셋째 슬라이드">
<사업부 클래스 = "회전 목마 캡션"> 제목 3 </ DIV>
</ DIV>
</ DIV>
<! - 회전 목마 (회전 목마) 탐색 ->
<A 클래스 = "회전 목마 제어는 왼쪽" HREF = "#myCarousel"
데이터 슬라이드 = "이전"> & lsaquo;
</ A>
<A 클래스 = "회전 목마 제어 권한" HREF = "#myCarousel"
데이터 슬라이드 = "다음"> & rsaquo;
</ A>
</ DIV>
»시도
결과는 다음과 같다 :
용법
- 데이터 속성을 통해 : 데이터 속성은 쉽게 회전 목마 (회전 목마)의 위치를 제어 할 수 있습니다.
- 현재의 위치로의 슬라이드의 위치를 변경하는키워드이전 또는다음데이터를받아 슬라이드 때문이다.
- 사용데이터 슬라이드를-하는 휠 인덱스원래 슬라이드에 동반자를전달, 데이터 슬라이드하는 = "2" 특정 인덱스 슬라이더를 이동, 0에서 지수는 계산을 시작합니다.
- 데이터를 타고 = "회전 목마"속성은 페이지가 동영상 재생을 시작로드 될 때 회전을 표시하기 위해 사용된다.
- 자바 스크립트에 의해 다음과 같이 회전 목마 (회전 목마), 자바 스크립트를 통해 수동으로 호출 할 수 있습니다 :
$ ( '. 회전 목마'). 회전 목마 ()
옵션
전달하는 데이터의 속성이나 자바 스크립트를 통해 몇 가지 옵션이 있습니다. 다음 표에서는 이러한 옵션을 나열합니다 :
| 选项名称 | 类型/默认值 | Data 属性名称 | 描述 |
|---|---|---|---|
| interval | number 默认值：5000 | data-interval | 自动循环每个项目之间延迟的时间量。如果为 false，轮播将不会自动循环。 |
| pause | string 默认值："hover" | data-pause | 鼠标进入时暂停轮播循环，鼠标离开时恢复轮播循环。 |
| wrap | boolean 默认值：true | data-wrap | 轮播是否连续循环。 |
방법
다음은 회전 목마 (회전 목마) 플러그인 유용한 몇 가지 방법은 다음과 같습니다 :
| 方法 | 描述 | 实例 |
|---|---|---|
| .carousel(options) | 初始化轮播为可选的 options 对象，并开始循环项目。 |
$('#identifier').carousel({
interval: 2000
})
|
| .carousel('cycle') | 从左到右循环轮播项目。 |
$('#identifier').carousel('cycle')
|
| .carousel('pause') | 停止轮播循环项目。 |
$('#identifier').carousel('pause') |
| .carousel(number) | 循环轮播到某个特定的帧（从 0 开始计数，与数组类似）。 |
$('#identifier').carousel(number) |
| .carousel('prev') | 循环轮播到上一个项目。 |
$('#identifier').carousel('prev') |
| .carousel('next') | 循环轮播到下一个项目。 |
$('#identifier').carousel('next') |
예
다음의 예는 상기 방법을 보여
예
<사업부 ID = "myCarousel" 클래스 = "회전 목마 슬라이드">
<! - 회전 목마 (회전 목마) 인덱스 ->
<안녕, 클래스 = "회전 목마 - 지표">
<리 데이터 대상 = "#myCarousel" 데이터 슬라이드에 = "0 "
클래스 = "활성"> </ 리>
<리 데이터 대상 = "#myCarousel" 데이터 슬라이드에 = "1 "> </ 리>
<리 데이터 대상 = "#myCarousel" 데이터 슬라이드에 = "2 "> </ 리>
</ 올>
<! - 회전 목마 (회전 목마) 프로젝트 ->
<사업부 > 클래스 = "회전 목마 - 내부"
<사업부 > 클래스 = "항목 활성"
<IMG SRC = "/wp-content/uploads/2014/07/slide1.png" ALT = "첫 번째 슬라이드">
</ DIV>
<사업부 클래스 = "항목">
<IMG SRC = "/wp-content/uploads/2014/07/slide2.png" ALT = "두 번째 슬라이드">
</ DIV>
<사업부 클래스 = "항목">
<IMG SRC = "/wp-content/uploads/2014/07/slide3.png" ALT = "셋째 슬라이드">
</ DIV>
</ DIV>
<! - 회전 목마 (회전 목마) 탐색 ->
<A 클래스 = "회전 목마 제어는 왼쪽" HREF = "#myCarousel"
데이터 슬라이드 = "이전"> & lsaquo; </ A>
<A 클래스 = "회전 목마 제어 권한" HREF = "#myCarousel"
데이터 슬라이드 = "다음"> & rsaquo; </ A>
<! - 컨트롤 버튼 ->
<사업부 스타일 = "텍스트 정렬 : 센터 ;">
<입력 = "버튼"을 입력 클래스 = "BTN 시작 슬라이드" 값 = "시작">
<입력 = "버튼"을 입력 클래스 = "BTN 일시 정지 슬라이드" 값 = "일시 중지">
<입력 = "버튼"을 입력 클래스 = "이전 슬라이드 BTN" 값 = "이전 슬라이드">
<입력 = "버튼"을 입력 클래스 = "btn을 다음 슬라이드" 값 = "다음 슬라이드">
<입력 = "버튼"을 입력 클래스 = "BTN 슬라이드 - 하나" 값 = "슬라이드 1">
<입력 = "버튼"을 입력 클래스 = "BTN 슬라이드 개의" 값 = "슬라이드 2">
<입력 = "버튼"을 입력 클래스 = "BTN 슬라이드 세" 값 = "슬라이드 3">
</ DIV>
</ DIV>
<스크립트>
$ (함수 () {
// 초기화 회전 목마 $ ( ".start - 슬라이드") 를 누른 상태에서 클릭 (함수 () {$ ( "#myCarousel") 회전 목마 ( '사이클');}); // 정지 회전 . $ ( ".pause - 슬라이드" )를 누른 상태에서 클릭 (함수 () {. $ ( "#myCarousel") 회전 목마 ( '일시 정지');}); // 프로젝트에 루프 회전 $ ( ".prev - 슬라이드") 를 누른 상태에서 클릭 (함수 () {$ ( "#myCarousel") 회전 목마 ( '이전');}); // 다음 항목에 회전주기 $ ( "다음 내용 - 슬라이드") 를 누른 상태에서 클릭 (함수 () {$ ( "#myCarousel") 회전 목마 ;.) ( '다음'}); // 루프 회전 특정 프레임에 $ ( ".slide-하나") 을 클릭합니다. (함수 () {$ ( "#myCarousel") 회전 목마 (0);}); $ ( ".slide - 두")를 누른 상태에서 클릭 (함수 () {$ ( "#myCarousel") 회전 목마 (1) ;.}); $ ( ".slide 세")를 누른 상태에서 클릭 (함수 () {$ ( "#myCarousel") 회전 목마 (2); ..});});
</ 스크립트>
»시도
결과는 다음과 같다 :
행사
다음 표는 회전 목마 (회전 목마) 플러그인을하는 경우에 사용되는이 나열되어 있습니다. 이러한 이벤트시 후크 함수를 사용할 수있다.
| 事件 | 描述 | 实例 |
|---|---|---|
| slide.bs.carousel | 当调用 slide 实例方法时立即触发该事件。 |
$('#identifier').on('slide.bs.carousel', function () {
// 执行一些动作...
})
|
| slid.bs.carousel | 当轮播完成幻灯片过渡效果时触发该事件。 |
$('#identifier').on('slid.bs.carousel', function () {
// 执行一些动作...
})
|
예
다음의 예는 이벤트의 사용법을 보여
예
<사업부 ID = "myCarousel" 클래스 = "회전 목마 슬라이드">
<! - 회전 목마 (회전 목마) 인덱스 ->
<안녕, 클래스 = "회전 목마 - 지표">
<리 데이터 대상 = "#myCarousel" 데이터 슬라이드에 = "0 "
클래스 = "활성"> </ 리>
<리 데이터 대상 = "#myCarousel" 데이터 슬라이드에 = "1 "> </ 리>
<리 데이터 대상 = "#myCarousel" 데이터 슬라이드에 = "2 "> </ 리>
</ 올>
<! - 회전 목마 (회전 목마) 프로젝트 ->
<사업부 > 클래스 = "회전 목마 - 내부"
<사업부 > 클래스 = "항목 활성"
<IMG SRC = "/wp-content/uploads/2014/07/slide1.png" ALT = "첫 번째 슬라이드">
</ DIV>
<사업부 클래스 = "항목">
<IMG SRC = "/wp-content/uploads/2014/07/slide2.png" ALT = "두 번째 슬라이드">
</ DIV>
<사업부 클래스 = "항목">
<IMG SRC = "/wp-content/uploads/2014/07/slide3.png" ALT = "셋째 슬라이드">
</ DIV>
</ DIV>
<! - 회전 목마 (회전 목마) 탐색 ->
<A 클래스 = "회전 목마 제어는 왼쪽" HREF = "#myCarousel"
데이터 슬라이드 = "이전"> & lsaquo; </ A>
<A 클래스 = "회전 목마 제어 권한" HREF = "#myCarousel"
데이터 슬라이드 = "다음"> & rsaquo; </ A>
</ DIV>
<스크립트>
$ (함수 () {$ ( '#myCarousel'). ( 'slide.bs.carousel'에서, 함수 () {
경고 ( "슬라이드 인스턴스 메서드 호출하면 즉시 이벤트를 트리거.");});});
</ 스크립트>
»시도
결과는 다음과 같다 :
