부트 스트랩 회전식 플러그인은 사이트에 슬라이더를 추가하는 유연하고 반응이 좋은 방법입니다. 그 외에도 콘텐츠는 이미지, 임베디드 프레임, 비디오 또는 배치하려는 다른 유형의 컨텐츠가 될 정도로 유연합니다.
플러그인의 기능을 별도로 참조하려면 carousel.js를 참조해야합니다. 또는 Bootstrap 플러그인 개요 장에서 언급했듯이 bootstrap.js 또는 compressed 버전의 bootstrap.min.js를 참조하십시오.
1. 예
아래는 부트 스트랩 회전식 플러그인을 사용하여 루핑 요소의 공통 구성 요소를 보여주는 간단한 슬라이드입니다. 회전 목마를 구현하려면 해당 마크와 함께 코드를 추가하면됩니다. 데이터 속성을 사용할 필요가없고 간단한 클래스 기반 개발 만 사용할 필요가 없습니다.
<! docType html> <html> <head> <title> bootstrap 인스턴스- 간단한 회전식 플러그인 </title> <link href = "/bootstrap/css/bootstrap.min.css"rel = "stylesheet"> <script src = "/scripts/jquery.min.js"> src = "/bootstrap/js/bootstrap.min.js"> </script> <body> <div id = "mycarousel"> <!-캐 러셀 표시기-> <ol> <li data-target = "#mycarousel"data-slide-to = "0"> </li> <li data-target = "#mycarousel" "1"> slide "> data-target = "#mycarousel"data-slide-to = "2"> </li> </ol> <!-회전식 프로젝트-> <div> <img src = "/media/uploads/2014/07/slide1.png"> </div> <div> <img src = "/media/uploads/uploads/uploads/07/sidg"> src = "/media/uploads/2014/07/slide3.png"> </div> </div> <!-Carousel Navigation-> <a href = "#mycarousel"data-slide = "prev"> ‹</a> <a href = "#mycarousel"data-slide = "next"> </a> </html>
결과는 다음과 같습니다.
간단한 회전식 플러그인
2. 선택적 제목
.item 내의 .carousel-caption 요소를 통해 슬라이드에 제목을 추가 할 수 있습니다. 선택적인 HTML을 거기에 넣으면 자동으로 정렬되고 형식화됩니다. 다음 예는 이것을 보여줍니다.
<! docType html> <html> <head> <title> bootstrap 인스턴스 - 회전식 플러그인의 제목 </title> <link href = "/bootstrap/css/bootstrap.min.css"rel = "stylesheet"> <script src = "/scripts/jquery.min.js"> src = "/bootstrap/js/bootstrap.min.js"> </script> <body> <div id = "mycarousel"> <!-캐 러셀 표시기-> <ol> <li data-target = "#mycarousel"data-slide-to = "0"> </li> <li data-target = "#mycarousel" "1"> slide "> Data-target = "#myCarousel"data-slide-to = "2"> </li> </ol> <!-회전식 프로젝트-> <div> <img src = "/media/uploads/2014/07/slide1.png"> div> title 1 </div> </div> <div> <img src = "/media/upload/upload/upload/uplog <div> 제목 2 </div> </div> <div> <IMG SRC = "/media/uploads/2014/07/slide3.png"> <div> Title 3 </div> </div> </div> <!-회전식 탐색-> <a href = "#mycarousel"data-slide = "prev"> <a href = "######" data-slide = "next">› </a> </div> </body> </html>
결과는 다음과 같습니다.
회전식 플러그인 제목
3. 사용법
데이터 속성을 통해 : 데이터 속성을 사용하여 회전식 위치를 쉽게 제어 할 수 있습니다.
속성 데이터 슬라이드는 키워드를 수락하거나 옆에 있으면 현재 위치에 비해 슬라이드의 위치를 변경합니다.
카우셀 베드의 바닥에 데이터 슬라이드를 원시 슬라이딩 인덱스로 사용하십시오. Data-Slide-to = "2"는 슬라이더를 특정 인덱스로 이동하고 인덱스는 0에서 카운트합니다.
Data-Ride = "Carousel"속성은 페이지를로드 할 때 애니메이션 재생을 시작하는 회전 목마를 표시하는 데 사용됩니다.
JavaScript를 통해 : Carousel은 다음과 같이 JavaScript를 통해 수동으로 호출 할 수 있습니다.
$ ( '. carousel'). carousel ()
4. 옵션
데이터 속성 또는 JavaScript를 통해 전달되는 몇 가지 옵션이 있습니다. 다음 표는 다음 옵션을 나열합니다.
V. 방법
Carousel 플러그인의 유용한 방법은 다음과 같습니다.
VI. 예
다음 예제는 방법의 사용법을 보여줍니다.
<! docType html> <html> <head> <title> bootstrap 인스턴스 - 회전식 플러그인 메소드 </title> <link href = "/bootstrap/css/bootstrap.min.css"rel = "stylesheet"> <script src = "/scripts/jquery.min.js"> src = "/bootstrap/js/bootstrap.min.js"> </script> <body> <div id = "mycarousel"> <!-캐 러셀 표시기-> <ol> <li data-target = "#mycarousel"data-slide-to = "0"> </li> <li data-target = "#mycarousel" "1"> slide "> data-target = "#mycarousel"data-slide-to = "2"> </li> </ol> <!-회전식 프로젝트-> <div> <img src = "/media/uploads/2014/07/slide1.png"> </div> <div> <img src = "/media/uploads/uploads/uploads/07/sidg"> src = "/media/uploads/2014/07/slide3.png"> </div> </div> <!-회전식 탐색-> <a href = "#mycarousel"data-slide = "prev"> ‹</a> <a href = "#mycarousel"data-slide = "next"> </a> </a> </ Style = "Text-Align;"> "> <입력 유형 ="버튼 "값 ="start "> <입력 유형 ="버튼 "value ="pause "> <입력 유형 ="button "value ="이전 슬라이드 "> <입력 유형 ="버튼 = "다음 슬라이드"> <value = "slide ="button "> <slide"> input type = "value ="slide = "button"> <input type = "value"> </div> </div> <cript> $ (function () {// carousel $ ( ". start-slide"). click (function () {$ ( "#mycarousel"). carousel ( 'cycle');}); // carousel $ ( ". pause-slide"). click (function ()). // CAROUSEL $ ( ". pause-slide"). click () {$ ( "#mycarousel"). carousel ( 'pause');}; $ ( ". Next-Slide"). click (function ( "#mycarousel"). carousel ( 'next');}; $ ( "#mycarousel"). Carousel (1); }); </script> </body> </html>결과는 다음과 같습니다.
회전 목마 플러그인 방법
7. 이벤트
다음 표는 회전식 플러그인에 사용될 이벤트를 나열합니다. 이러한 이벤트는 기능의 후크로 사용될 수 있습니다.
예
다음 예는 이벤트 사용을 보여줍니다.
<! docType html> <html> <head> <title> bootstrap 인스턴스- 회전식 플러그인 이벤트 </title> <link href = "/bootstrap/css/bootstrap.min.css"rel = "stylesheet"> <script src = "/scriptts/jquery.min.js"> src = "/bootstrap/js/bootstrap.min.js"> </script> <body> <div id = "mycarousel"> <!-캐러 셀 메트릭-> <ol> <li data-target = "#mycarousel"data-slide-to = "0"> </li> <li data-target = "#mycarousel"< "1"> data-target = "#mycarousel"data-slide-to = "2"> </li> </ol> <!-회전식 프로젝트-> <div> <img src = "/media/uploads/2014/07/slide1.png"> </div> <div> <img src = "/media/uploads/uploads/uploads/07/sidg"> src = "/media/uploads/2014/07/slide3.png"> </div> </div> <!-Carousel Navigation-> <a href = "#mycarousel"data-slide = "prev"> ‹</a> <a href = "#mycarousel"data-slide = "next"> </a> </div> </a> $ ( '#mycarousel'). on ( 'slide.bs.carousel', function () { "슬라이드 인스턴스 메소드가 호출되면 즉시 이벤트를 플래시합니다."); }); </script> </body> </html>결과는 다음과 같습니다.
회전 목마 플러그인 이벤트
위의 튜토리얼에 따르면, 나는 내 자신의 예를 만들었습니다.
회전식 플러그인은 순서대로 같은 크기의 몇 가지 큰 그림을 재생합니다.
// 기본 예. <div id = "mycarousel"> <ol> <li data-target = "#mycarousel"data-slide-to = "0"> </li> <li data-target = "#mycarousel"data-slide-to = "1"> </li> <li data-target = "#mycarousel"data-slide-to = "2"> </ol> </li> src = "img/slide1.png"> </div> <div> <img src = "img/slide2.png"> </div> <img src = "img/slide2.png"> </div> <div> <img src = "img/slide3.png"> </div> <a href = mycarousel " data-slide = "prev"> ‹</a> <a href = "#mycarousel"data-slide = "next">› </a> </div>
데이터 속성 설명 :
1. 데이터-슬라이드는 키워드를 이전 또는 옆으로 받아들입니다.
2. 데이터-슬라이드-회전 목마의 바닥에 원래 슬라이딩 인덱스를 만듭니다. Data-Slide-to = "2"는 슬라이더를 특정 인덱스로 이동하고 인덱스는 0에서 카운트합니다.
3.Data-Ride = "Carousel"속성 사용자 태그 캐러셀 페이지가로드되면 애니메이션 재생을 시작합니다.
JavaScript로 호출하는 경우 키 값 쌍 방법을 직접 사용하고 데이터를 제거하십시오.
// 사용자 정의 속성을 설정합니다
$ ( '#mycarousel'). 회전식 ({// 자동 재생 설정/2 초 간격 : 2000, // 이벤트 정지 설정 : '호버', // 한 번만 재생 : false,});회전식 플러그인은 다음과 같이 몇 가지 방법을 제공합니다.
// 버튼을 클릭하여 $ ( 'button'). on ( 'click', function () {// 클릭 후 $ ( '#myCarousel'). carousel ( 'cycle'); // 다른 유사});이벤트
$ ( '#mycarousel'). on ( 'slide.bs.carousel', function () {alert ( '슬라이드 인스턴스 모드가 호출 될 때 즉시 무료로 무료입니다);}); $ ( '#mycarousel'). on ( 'slid.bs.carousel', function () {alert ( '회전 목마가 슬라이드를 완료 할 때 무료');});자세한 내용은 Bootstrap Learning Tutorial을 참조하십시오
위는이 기사에 관한 것입니다. 모든 사람들이 부트 스트랩 회전식 플러그인을 배우는 것이 도움이되기를 바랍니다.