English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Bootstrap 캐러셀(Carousel) 플러그인은 사이트에 슬라이더를 추가하는 유연한 반응형 방법입니다. 이 외에도 내용도 매우 유연하며, 이미지, 내嵌 프레임, 비디오 또는 다른 어떤 유형의 내용도 추가할 수 있습니다。
플러그인의 기능을 단독으로 참조하고 싶다면, carousel.js。또는, Bootstrap 플러그인 개요 챕터에서 언급된 것처럼, bootstrap.js 또는 압축된 bootstrap.min.js。
다음은 단순한 슬라이드입니다. Bootstrap 캐러셀(Carousel) 플러그인을 사용하여 반복 재생 요소의 일반 컴포넌트를 표시했습니다. 캐러셀을 구현하려면 해당 태그를 추가하는 것만으로도 충분합니다. data 속성을 사용하지 않고 단순한 클래스 기반 개발만으로도 됩니다。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 예제 - 간단한 캐러셀(Carousel) 플러그인</title> <link rel="stylesheet" href="//cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="//cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="//cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div id="myCarousel" class="carousel slide"> <!-- 롤링(Carousel) 지시자 --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1></li> <li data-target="#myCarousel" data-slide-to="2></li> </ol> <!-- 롤링(Carousel) 항목 --> <div class="carousel-inner"> <div class="item active"> <img src="/run/images/slide1.png" alt="First slide"> </div> <div class="item"> <img src="/run/images/slide2.png" alt="Second slide"> </div> <div class="item"> <img src="/run/images/slide3.png" alt="Third slide"> </div> </div> <!-- 롤링(Carousel) 탐색 --> <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">이전</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">다음</span> </a> </div> </body> </html>테스트 보고서 ‹/›
결과는 다음과 같습니다:
선택적인 제목을 통해 .item 내부의 .carousel-caption 요소를 통해 슬라이드에 제목을 추가합니다. 여기에 어떤 선택적인 HTML을 두고도 됩니다. 그것은 자동으로 정렬되고 포맷됩니다. 다음 예제가 이를 보여줍니다:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 예제 - 캐러셀(Carousel) 플러그인의 제목</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div id="myCarousel" class="carousel slide"> <!-- 롤링(Carousel) 지시자 --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1></li> <li data-target="#myCarousel" data-slide-to="2></li> </ol> <!-- 롤링(Carousel) 항목 --> <div class="carousel-inner"> <div class="item active"> <img src="/run/images/slide1.png" alt="First slide"> <div class="carousel-caption">제목 1</div> </div> <div class="item"> <img src="/run/images/slide2.png" alt="Second slide"> <div class="carousel-caption">제목 2</div> </div> <div class="item"> <img src="/run/images/slide3.png" alt="Third slide"> <div class="carousel-caption">제목 3</div> </div> </div> <!-- 롤링(Carousel) 탐색 --> <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">이전</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">다음</span> </a> </div> </body> </html>테스트 보고서 ‹/›
결과는 다음과 같습니다:
data 속성을 통해:data 속성을 사용하여 쉽게 캐러셀(Carousel) 위치를 제어할 수 있습니다。
속성을 받아들입니다 data-slide 키워드 prev 또는 next을 사용하여 슬라이드가 현재 위치에 비해 위치를 변경합니다.
사용하여 data-slide-to 원시 슬라이딩 인덱스를 전달하여data-slide-to="2" 스ライ더를 특정 인덱스로 이동시킵니다. 인덱스는 0부터 시작합니다.
data-ride="carousel" 속성은 페이지 로드 시 롤러가 애니메이션을 시작하도록 표시합니다。
JavaScript를 통해:롤러(Carousel)는 다음과 같이 JavaScript를 통해 수동으로 호출할 수 있습니다:
$('.carousel').carousel()
某些选项是通过 data 속성이나 JavaScript를 통해 전달됩니다. 아래 표는 이러한 옵션들을 나열합니다:
옵션 이름 | 타입/기본 값 | Data 속성 이름 | 설명 |
---|---|---|---|
interval | number 기본 값:5000 | data-interval | 각 아이템 사이에 지연 시간을 자동으로 반복합니다. false이면 롤러는 자동으로 반복하지 않습니다。 |
pause | string 기본 값: "hover" | data-pause | 마우스가 들어갈 때 롤러 반복을 멈추고, 마우스가 나갈 때 롤러를 재개합니다。 |
wrap | boolean 기본 값: true | data-wrap | 롤러가 반복적으로 반복하는지 여부 |
롤러(Carousel) 플러그인에 있는 유용한 메서드들:
메서드 | 설명 | 예제 |
---|---|---|
.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') |
아래의 예제는 메서드의 사용법을 설명합니다:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 예제 - 롤러(Carousel) 플러그인 메서드</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div id="myCarousel" class="carousel slide"> <!-- 롤링(Carousel) 지시자 --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1></li> <li data-target="#myCarousel" data-slide-to="2></li> </ol> <!-- 롤링(Carousel) 항목 --> <div class="carousel-inner"> <div class="item active"> <img src="/run/images/slide1.png" alt="First slide"> </div> <div class="item"> <img src="/run/images/slide2.png" alt="Second slide"> </div> <div class="item"> <img src="/run/images/slide3.png" alt="Third slide"> </div> </div> <!-- 롤링(Carousel) 탐색 --> <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">이전</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">다음</span> </a> </div> <!-- 제어 버튼 --> <div style="text-align:center;"> <input type="button" class="btn start-slide" value="Start"> 테스트 보고서 ‹/›
결과는 다음과 같습니다:
아래 표는 캐러셀(Carousel) 플러그인에서 사용할 이벤트를 나열합니다. 이 이벤트는 함수에서 훅으로 사용할 수 있습니다.
이벤트 | 설명 | 예제 |
---|---|---|
slide.bs.carousel | slide 예제 메서드를 호출할 때 즉시 이 이벤트가 트리거됩니다. | $('#identifier').on('slide.bs.carousel', function () { // 일정한 행동을 수행합니다... }) |
slid.bs.carousel | 스ライ드 캐러셀의 트랜지션 효과가 완료되면 이 이벤트가 트리거됩니다. | $('#identifier').on('slid.bs.carousel', function () { // 일정한 행동을 수행합니다... }) |
아래의 예제는 이벤트 사용법을 보여줍니다:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 예제 - 롤링(Carousel) 플러그인 이벤트</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div id="myCarousel" class="carousel slide"> <!-- 롤링(Carousel) 지시자 --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1></li> <li data-target="#myCarousel" data-slide-to="2></li> </ol> <!-- 롤링(Carousel) 항목 --> <div class="carousel-inner"> <div class="item active"> <img src="/run/images/slide1.png" alt="First slide"> </div> <div class="item"> <img src="/run/images/slide2.png" alt="Second slide"> </div> <div class="item"> <img src="/run/images/slide3.png" alt="Third slide"> </div> </div> <!-- 롤링(Carousel) 탐색 --> <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">이전</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">다음</span> </a> </div> <script> $(function() { $('#myCarousel').on('slide.bs.carousel', function () { alert("slide 예제 메서드 호출 시 즉시 이 이벤트가 발생합니다."); }); }); </script> </body> </html>테스트 보고서 ‹/›
결과는 다음과 같습니다: