본문으로 건너뛰기
실습하기

캐러셀(Carousel)이란?

이미지와 같은 콘텐츠를 회전식 슬라이드로 보여주는 캐러셀(Carousel)에 대해 알아보겠습니다.

캐러셀은 한국어로 번역하면 회전목마를 의미합니다.

여러 마리의 말이 원을 그리며 돌아가는 회전목마처럼, 웹사이트에 캐러셀을 적용하면 여러 개의 이미지나 콘텐츠를 일정한 간격으로 자동으로 전환하여 보여줍니다.

주로 이미지 갤러리, 제품 프로모션, 공지사항 등 다양한 곳에서 사용되며, 웹페이지의 상단이나 중간에 배치되어 주목받는 위치에서 활용됩니다.

또한, 자동 전환 기능을 제공하기 때문에 사용자가 직접 클릭하지 않아도 다음 내용을 자동으로 보여줄 수 있어 사용자의 관심을 끌 수 있습니다.


템플릿 내 캐러셀 코드
<div class="slideshow-container">
  <div class="my-slides fade">
    <img src="https://assets.codefriends.net/assets/images/bio-website/carousel-1.webp" class="slide-image" />
    <div class="slide-text">이미지 설명1</div>
  </div>

  <div class="my-slides fade">
    <img src="https://assets.codefriends.net/assets/images/bio-website/carousel-2.jpeg" class="slide-image" />
    <div class="slide-text">이미지 설명2</div>
  </div>

  <div class="my-slides fade">
    <img src="https://assets.codefriends.net/assets/images/bio-website/carousel-3.jpeg" class="slide-image" />
    <div class="slide-text">이미지 설명3</div>
  </div>

  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!