6-4. 이미지 슬라이드
■ 이미지 슬라이드
부트스트랩의 이미지 슬라이드는 회전목마(carousel) 형태로 순환하는 구조입니다.
다음 예제에서는 표시기와 컨트롤을 사용하여 기본적인 이미지 슬라이드를 만드는 방법을 보여줍니다.
<div class="container mt-3">
<h3>이미지 슬라이드</h3>
<div id="slide1" class="carousel slide w-75" data-bs-ride="carousel">
<!-- Indicators/dots -->
<div class="carousel-indicators">
<button type="button" data-bs-target="#slide1" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#slide1" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#slide1" data-bs-slide-to="2"></button>
</div>
<!-- The slideshow/carousel -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/image1.jpg" alt="이탈리아" class="d-block" style="width:100%">
</div>
<div class="carousel-item">
<img src="img/image2.jpg" alt="이탈리아" class="d-block" style="width:100%">
</div>
<div class="carousel-item">
<img src="img/image3.jpg" alt="이탈리아" class="d-block" style="width:100%">
</div>
</div>
<!-- Left and right controls/icons -->
<button class="carousel-control-prev" type="button" data-bs-target="#slide1" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#slide1" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
</div>
ex6-19.html의 실행 결과
