JS 회전 목마 (carousel.js)
회전 목마 플러그인은 회전 목마 (슬라이드 쇼)와 같은 요소를 통해 자전거에 대한 구성 요소입니다.
캐 러셀에 대한 자습서를 들어, 우리의 읽기 Bootstrap 회전 목마 자습서 .
참고 : (그들은 슬라이드 효과를 달성하기 위해 CSS3 전환 및 애니메이션을 사용하기 때문에) 캐 러셀 이전 인터넷 익스플로러 9에서 제대로 지원되지 않습니다.
회전 목마 플러그인 클래스
| 수업 | 기술 |
|---|---|
| .carousel | 회전 목마를 작성합니다 |
| .slide | 한 항목에서 다음에 슬라이딩 할 때 CSS 전환 및 애니메이션 효과를 추가합니다. 이 효과를하지 않으려면이 클래스를 제거 |
| .carousel-indicators | 회전 목마에 대한 지표를 추가합니다. 다음은 각 슬라이드의 맨 아래에있는 작은 점입니다 (회전 목마에 얼마나 많은 슬라이드를 나타내며, 이는 사용자가 현재보고있는 슬라이드) |
| .carousel-inner | 회전 목마에 슬라이드를 추가합니다 |
| .item | 각 슬라이드의 내용을 지정 |
| .left carousel-control | 사용자가 슬라이드 사이 돌아갈 수있는 회전 목마에 왼쪽 버튼을 추가합니다 |
| .right carousel-control | 사용자가 슬라이드 사이에 전진 할 수 있도록 회전 목마에 오른쪽 버튼을 추가합니다 |
| .carousel-caption | 회전 목마에 대한 캡션을 지정합니다 |
통해 data-* 속성
data-ride="carousel" 속성은 회전 목마를 활성화합니다.
data-slide 및 data-slide-to 에 가서 밀어 지정 속성.
data-slide 하면서, 이전 또는 다음 : 속성은 두 개의 값을 받아 data-slide-to 번호를 받아들입니다.
예
<!--
Carousel -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!--
Carousel Indicators -->
<li data-target="#myCarousel" data-slide-to="1"></li>
<!--
Carousel Controls -->
<a
class="left carousel-control" href="#myCarousel" data-slide="prev">
»그것을 자신을 시도 자바 스크립트를 통해
수동으로 사용 :
예
// Activate Carousel
$("#myCarousel").carousel();
// Enable
Carousel Indicators
$(".item").click(function(){
$("#myCarousel").carousel(1);
});
// Enable Carousel Controls
$(".left").click(function(){
$("#myCarousel").carousel("prev");
});
»그것을 자신을 시도 회전 목마 옵션
옵션 데이터 속성이나 자바 스크립트를 통해 전달 될 수 있습니다. 데이터 속성의 경우, = ""데이터 간격으로, 데이터 -에 옵션 이름을 추가합니다.
| 이름 | 유형 | 태만 | 기술 | 시도 해봐 |
|---|---|---|---|---|
| interval | number, or the boolean false | 5000 | 각 슬라이드 사이 (밀리 초)의 지연 시간을 지정합니다. 참고 : false로 설정 간격을 자동으로 미끄러지 항목을 중지 | JS 사용 하여 데이터를 |
| pause | string, or the boolean false | "hover" | 마우스 포인터가 회전 목마를 입력 다음 슬라이드를 겪고에서 회전 목마를 일시 정지하고, 마우스 포인터가 회전 목마를 떠날 때 슬라이딩을 다시 시작 참고 : false로 설정 일시 정지를 가져가 일시 중지 할 수있는 기능을 중지 | JS 사용 하여 데이터를 |
| wrap | boolean | true | 회전 목마가 지속적으로 모든 슬라이드를 이동하거나 마지막 슬라이드에서 중지할지 여부를 지정합니다
| JS 사용 하여 데이터를 |
회전 목마 방법
다음 표는 사용 가능한 모든 회전 목마 방법을 보여줍니다.
| 방법 | 기술 | 시도 해봐 |
|---|---|---|
| .carousel( options ) | 옵션으로 회전 목마를 활성화합니다. 유효한 값은 위의 옵션을 참조하십시오 | 시도 해봐 |
| .carousel("cycle") | 왼쪽에서 오른쪽으로 회전 목마 항목을 통해 이동합니다 | 시도 해봐 |
| .carousel("pause") | 항목을 겪고에서 회전 목마를 중지 | 시도 해봐 |
| .carousel(number) | 지정된 항목으로 이동 (제로 기반 : 첫 번째 항목은 0, 두 번째 항목은 등 1 ..) | 시도 해봐 |
| .carousel("prev") | 이전 항목으로 이동 | 시도 해봐 |
| .carousel("next") | 다음 항목으로 이동 | 시도 해봐 |
회전 목마 이벤트
다음 표는 사용 가능한 모든 회전 목마 이벤트를 보여줍니다.
| 행사 | 기술 | 시도 해봐 |
|---|---|---|
| slide.bs.carousel | 회전 목마는 한 항목에서 다른 슬라이드하려고 할 때 발생합니다 | 시도 해봐 |
| slid.bs.carousel | 회전 목마는 한 항목에서 다른 슬라이딩 완료되면 발생 | 시도 해봐 |
예
슬라이드에 자막
추가 <div class="carousel-caption"> 각 내에 <div class="item"> 각 슬라이드에 대한 캡션을 만들려면 :
예
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<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>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner"
role="listbox">
<div class="item active">
<img src="img_chania.jpg" alt="Chania">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The
atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div
class="item">
<img src="img_chania2.jpg"
alt="Chania">
<div
class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div
class="item">
<img src="img_flower.jpg"
alt="Flower">
<div
class="carousel-caption">
<h3>Flowers</h3>
<p>Beatiful
flowers in Kolymbari, Crete.</p>
</div>
</div>
<div class="item">
<img src="img_flower2.jpg" alt="Flower">
<div class="carousel-caption">
<h3>Flowers</h3>
<p>Beatiful
flowers in Kolymbari, Crete.</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<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">Previous</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">Next</span>
</a>
</div>
»그것을 자신을 시도