부트스트랩 4 캐러셀
부트스트랩 4 캐러셀
Carousel은 요소를 순환하는 슬라이드쇼입니다.
회전 목마를 만드는 방법
다음 예는 표시기와 컨트롤이 있는 기본 캐러셀을 만드는 방법을 보여줍니다.
예시
<div id="demo" class="carousel slide" data-ride="carousel">
<!--
Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li
data-target="#demo" data-slide-to="2"></li>
</ul>
<!--
The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="la.jpg"
alt="Los Angeles">
</div>
<div
class="carousel-item">
<img src="chicago.jpg"
alt="Chicago">
</div>
<div
class="carousel-item">
<img src="ny.jpg"
alt="New York">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev"
href="#demo" data-slide="prev">
<span
class="carousel-control-prev-icon"></span>
</a>
<a
class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
설명된 예
위 예제의 각 클래스가 하는 일에 대한 설명:
| Class | Description |
|---|---|
.carousel |
Creates a carousel |
.carousel-indicators |
Adds indicators for the carousel. These are the little dots at the bottom of each slide (which indicates how many slides there are in the carousel, and which slide the user are currently viewing) |
.carousel-inner |
Adds slides to the carousel |
.carousel-item |
Specifies the content of each slide |
.carousel-control-prev |
Adds a left (previous) button to the carousel, which allows the user to go back between the slides |
.carousel-control-next |
Adds a right (next) button to the carousel, which allows the user to go forward between the slides |
.carousel-control-prev-icon |
Used together with .carousel-control-prev to create a "previous" button |
.carousel-control-next-icon |
Used together with .carousel-control-next to create a "next" button |
.slide |
Adds a CSS transition and animation effect when sliding from one item to the next. Remove this class if you do not want this effect |
슬라이드에 캡션 추가
각 슬라이드에 대한 캡션을 만들려면 <div class="carousel-caption">각각 내부에 요소를 추가합니다 .<div
class="carousel-item">
예시
<div class="carousel-item">
<img src="la.jpg" alt="Los Angeles">
<div class="carousel-caption">
<h3>Los
Angeles</h3>
<p>We had such a great time in LA!</p>
</div>
</div>
전체 부트스트랩 캐러셀 참조
모든 캐러셀 옵션, 메서드 및 이벤트에 대한 전체 참조를 보려면 Bootstrap JS 캐러셀 참조 로 이동하십시오 .