캐로셀

jb kim·2023년 8월 6일
0

부트스트랩

목록 보기
43/48

		<!-- 캐로셀 섹션 시작 -->
		<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>

두번째 세번째 이미지 캡션 넣기

profile
픽서

0개의 댓글