[Bootstrap 4] 회전목마

1. 회전목마

웹 애플리케이션에서 배너를 표시할 때 사용하는 UI 요소입니다.

 

2. 회전목마 주요 css 클래스

• carousel : 회전목마 요소로 만들어줌
• carousel-inner : 이미지를 표시하는 영역
• carousel-indicator : 인디케이터를 표시하는 영역

 

3. 회전목마 구현

<div class="container">
    <div class="carousel slide" data-ride="carousel" data-interval="3000" id="banner">
        <!-- 이미지 부분 -->
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="image/la.jpg">
            </div>
            <div class="carousel-item">
                <img src="image/chicago.jpg">
                <div class="carousel-caption">
                    <h3>회전 목마 캡션</h3>
                    <p>이 문자열은 회전 목마 이미지의 캡션입니다.</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="image/ny.jpg">
            </div>
        </div>
        <!-- 인디케이션터 부분 -->
        <ul class="carousel-indicators">
            <!-- 0번째 이미지를 보여줌 -->
            <li data-target="#banner" data-slide-to="0" class="active"></li>
            <li data-target="#banner" data-slide-to="1"></li>
            <li data-target="#banner" data-slide-to="2"></li>
        </ul>
        <!-- 이동 버튼 부분 -->
        <a href="#banner" class="carousel-control-prev" data-slide="prev">
            <!-- 이전 버튼 -->
            <span class="carousel-control-prev-icon"></span>
        </a>
        <a href="#banner" class="carousel-control-next" data-slide="next">
            <!-- 다음 버튼 -->
            <span class="carousel-control-next-icon"></span>
        </a>
    </div>
</div>

 

정리하며

• 회전목마 : carousel, carousel-item
• 이미지 : carousel-inner
• 인디케이션터 : carousel-indicators
• 이동 : carousel-control-prev, carousel-control-next
• 캡션 : carousel-caption

 

References

source code : https://github.com/yonghwankim-dev/Bootstrap_study/tree/main/Carousel/src/main/webapp
[인프런] 윤재성의 Bootstrap 4 & 3 Framework Tutorial