본문 바로가기
javascript/javascript

자바스크립트 bootstrap5 carousel 기능 만들기 (캐러셀)

by 산코디 2023. 2. 3.

자바스크립트 bootstrap5 carousel 기능 만들기 (캐러셀)

 

 

안녕하세요.

오늘은 bootstrap5의 carousel (캐러셀) 기능에 대해 포스팅하려고 합니다. carousel의 뜻은 회전목마를 의미하며, 의미하는 것처럼 이미지 같은 요소를 회전시켜 가며 효과를 주는 기능입니다. 보통 슬라이드쇼라고도 합니다. 보통 홈페이지를 소개하는 요소가 있거나 광고할 요소가 많은 경우에 carousel 기능을 활용해서 한 화면에서 다양한 이미지나 영상을 보여줄 수 있습니다. 효과가 아주 좋습니다!

carousel 캐러셀
carousel은 회전목마를 의미하며, 이미지나 영상과 같은 요소를 회전시켜가며 효과를 주는 기능 (슬라이드쇼와 같은 효과)

 

1. carousel 컴포넌트

<!doctype html>
<html lang="en">
    <head>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    </head>
    <body>
        <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-inner">
              <div class="carousel-item active">
                <img src="image/bootstrap_1.png" class="d-block w-100" alt="...">
              </div>
              <div class="carousel-item">
                <img src="image/bootstrap_2.png" class="d-block w-100" alt="...">
              </div>
              <div class="carousel-item">
                <img src="image/bootstrap_3.png" class="d-block w-100" alt="...">
              </div>
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
              <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
              <span class="visually-hidden">Next</span>
            </button>
        </div>
    </body>
    <style>
    body {
        width       : 500px;
        margin      : 0 auto;
        margin-top  : 220px;
    }
    </style>
</html>

간단한 샘플 이미지 3개를 연동해서 carousel 컴포넌트를 활성화시켰습니다.

 

carousel 속성 등록

carousel 태그의 속성값을 보게 되면 

  • class="carousel slide" : carousel 설정 및 슬라이딩 설정
  • data-bs-ride="carousel" : 일정 시간마다 자동으로 슬라이딩 처리되는 속성

위의 두 설정값을 추가해주면 기본적인 carousel 컴포넌트로 활성화가 됩니다.

carousel-inner 영역 등록

다음은 내부 요소 중 슬라이딩에 사용할 이미지 요소를 추가해 줬습니다. 

<div class="carousel-inner">
  <div class="carousel-item active">
    <img src="image/bootstrap_1.png" class="d-block w-100" alt="...">
  </div>
  <div class="carousel-item">
    <img src="image/bootstrap_2.png" class="d-block w-100" alt="...">
  </div>
  <div class="carousel-item">
    <img src="image/bootstrap_3.png" class="d-block w-100" alt="...">
  </div>
</div>

위의 예시를 보게 되면 최상단 요소에 "carousel-inner" class를 추가해 주고 태그 내에 보여줄 이미지 수만큼 태그를 추가해 주면 됩니다. 

carousel prev, next 버튼 등록

그리고 수동으로 슬라이드를 넘길 수 있는 이전 페이지 prev와 다음 페이지 next 버튼도 추가하였습니다.

<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  <span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
  <span class="carousel-control-next-icon" aria-hidden="true"></span>
  <span class="visually-hidden">Next</span>
</button>

위처럼 이전 페이지의 버튼은 "carousel-control-prev" class를 추가해 주고, 다음 페이지의 버튼은 "carousel-control-next" 버튼을 추가해 주면 됩니다.

그리도 두 버튼의 공통 속성값으로 data-bs-target에 최상단의 carousel id값을 연동시켜주면 됩니다.

 

그럼 위의 간단한 설정으로 실행되는 화면을 보도록 하겠습니다.

 

실행 결과

자바스크립트 부트스트랩 carousel 캐러셀 슬라이딩 화면

위의 실행 결과처럼 자동으로 슬라이딩이 되는 모습입니다. 

 

그럼 다음은 carousel의 요소중 하나인 indicator (인디케이터) 기능을 추가해 보도록 하겠습니다.

 

반응형

2. indicator (인디케이터) 추가 예시

<div id="carouselExampleControls" class="carousel slide"  data-bs-ride="carousel">
    <div class="carousel-indicators">
        <button type="button" data-bs-target="#carouselExampleControls" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
        <button type="button" data-bs-target="#carouselExampleControls" data-bs-slide-to="1" aria-label="Slide 2"></button>
        <button type="button" data-bs-target="#carouselExampleControls" data-bs-slide-to="2" aria-label="Slide 3"></button>
    </div>
    
    ...
</div>

indicator는 carousel 내에서 슬라이딩되어 있는 요소들을 버튼으로 하나하나 연동하여 원하는 요소로 바로 이동할 수 있도록 도와주는 기능입니다. 

 

위의 기본 예시 소스 코드에서 indicator 요소를 추가해 줬습니다. 위의 소스 코드를 보게 되면 "carousel-indicators" class를 추가해 줬습니다. 그리고 하위에 이미지 수만큼 버튼을 추가하여 연동해 줬습니다.

 

  • data-bs-target="..." : 최상단의 carouse id값 연동
  • data-bas-slide-to="0" : 버튼과 연동되는 이미지의 인덱스 번호

버튼별로 위의 속성을 연동해주면 간단하게 casousel의 기능과 연동이 됩니다. 

 

실행 결과

자바스크립트 carousel indicator 연동 화면

위의 실행 결과와 같이 하단부의 indicator로 활성화된 버튼을 클릭하게 되면 버튼마다 연동돼있는 이미지로 바로 이동하게 됩니다. carousel의 기본 컴포넌트도 활용도가 높지만 기능을 하나만 추가해 줘도 기능의 완성도가 올라가는 것 같습니다!

3. caption 추가 예시

<div class="carousel-inner">
  <div class="carousel-item active">
    <img src="image/bootstrap_1.png" class="d-block w-100" alt="...">
    <div class="carousel-caption d-none d-md-block">
        <p>첫번째 이미지 예시입니다.</p>
    </div>
  </div>
  
  ...
</div>

caption은 carousel-item 요소 내에 텍스트 문구를 삽입하여 이미지의 부가적인 설명을 달아줄 수 있습니다. 강조할 내용을 추가할 때 사용하면 좋습니다.

 

아까 위에서 처음에 작성했던 소스 코드에서 carousel-inner 요소 부분에 caption을 추가해 줬습니다. caption으로 사용할 부분에 "carousel-caption" class를 추가해 주고 태그 내에 내용을 작성해주면 됩니다. 

 

실행 결과

자바스크립트 bootstrap carousel caption 추가 화면

위의 화면처럼 이미지 하단부에 문구가 추가된 모습입니다.

 

마무리

오늘은 자바스크립트의 라이브러리 bootstrap의 carousel 기능에 대해 정리해 봤습니다. 보통 사용자 홈페이지에서 홍보나 광고성으로 다양한 이미지나 영상을 띄워줄 때 활용하면 정말 좋습니다. 부가적인 기능을 추가하는 것도 간단하기 때문에 예제 소스 코드만 보셔도 금방 따라 하실 수 있을 거예요! 저도 금방 했습니다 ㅎㅎ

 

다음에도 계속해서 bootstrap의 소소한 기능들을 가져와 포스팅을 하겠습니다.

 

 

그럼 오늘도 저의 작도 소중한 글을 읽어주셔서 감사합니다. :)

 

 

 

반응형
저작자표시 비영리 변경금지 (새창열림)

'javascript > javascript' 카테고리의 다른 글

자바스크립트 Chart.js 바(Bar) 차트 만들기 (막대차트)  (1) 2023.02.04
자바스크립트 bootstrap5 tooltip (툴팁) 만들기  (0) 2023.02.04
자바스크립트 bootstrap5 아코디언 만들기 (accordion)  (0) 2023.02.03
자바스크립트 bootstrap5 Offcanvas 만들기 (오프캔버스)  (0) 2023.02.02
자바스크립트 bootstrap 5 경고창 만들기  (0) 2023.02.01

관련글

티스토리툴바