[부트스트랩5] 캐러셀 사용하기

부트스트랩(bootstrap)의 캐러셀(Carousel)을 사용해보자.

 

부트스트랩을 모른다면? 여기를 참고하자

 

우선 완성된 모습이다.

 

 

 

 

---

사용방법은 아주 간단하다.

 

우선 부트스트랩의 Carousel 페이지에서 원하는 형태의 캐러셀을 선택한다.

나는 With Controls 라는것을 골랐다.

 

코드를 body태그에 붙혀넣고, 코드의 "..." 부분을 이미지 링크로 바꿔넣어주면 된다.

See the Pen Untitled by Jirong (@jirongkim) on CodePen.

위의 예시코드에서는 편의를 위해 이미지 링크를 unsplash라는 사이트에서 가지고왔다.

 

실습하는 .html 문서와 동일한 위치에 이미지 파일이 존재한다면

<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="cat.png" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="dog.png" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="bird.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>

이런식으로 이미지 파일 명을 적어주면 된다.