
<section id="hero-carousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active c-item">
<img src="이미지폴더의 pic1" class="d-block w-100 c-img" alt="Slide 1" />
</div>
<div class="carousel-item c-item">
<img src="이미지폴더의 pic2" class="d-block w-100 c-img" alt="Slide 2" />
</div>
<div class="carousel-item c-item">
<img src="이미지폴더의 pic3" class="d-block w-100 c-img" alt="Slide 3" />
</div>
</div>
</section>
캐로셀과 이미지 높이, 필터 특수효과
<style>
.c-item {
height: 480px;
}
.c-img {
height: 100%;
object-fit: cover;
filter: brightness(0.6);
}
</style>
가로 세로 버튼 캐로셀이너 아래에
<button class="carousel-control-prev" type="button" data-bs-target="#hero-carousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">이전</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#hero-carousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">다음</span>
</button>
인디케이터 캐로셀이너 위에
<div class="carousel-indicators">
<button type="button" data-bs-target="#hero-carousel" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#hero-carousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#hero-carousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
캐로셀 캡션 이미지밑에 (캐로셀아이템안)
<div class="carousel-caption top-0 mt-4">
<p class="mt-5 fs-3 text-uppercase">Discover the hidden world</p>
<h1 class="display-1 fw-bolder text-capitalize">The Aurora Tours</h1>
<button class="btn btn-primary px-4 py-2 fs-5 mt-5">
투어 예약
</button>
</div>
두번째 세번째 이미지 캡션 넣기

