캐러셀 구성하기

캐러셀은 여러 개의 아이템을 가로로 나열하여 한 번에 하나 이상의 아이템을 보여주는 구성 요소입니다.

사용자는 좌우 버튼을 사용하여 다른 아이템으로 스크롤할 수 있습니다. 이는 비즈니스 상품이나 광고 등을 돋보이게 하는 데 효과적입니다.

<div class="popular-box">
  ...
  <!-- 캐러셀 컨테이너 -->
  <div class="popular-items-container">
    <div class="popular-items-list margin-left-auto">
      <!-- 캐러셀 아이템 -->
      <div class="popular-item">
        <img
          class="cover-img"
          src="https://assets.codefriends.net/templates/web/promotion-1/assets/famous-1.png"
        />
        ...
      </div>
      ...
    </div>
    <!-- 캐러셀 버튼 -->
    <div class="popular-item-buttons-container">
      ....
      <button class="popular-left-button">...</button>
      <button class="popular-right-button">...</button>
    </div>
  </div>
</div>

<div class="popular-box">: 전체 캐러셀의 외부 컨테이너입니다. 이 안에 캐러셀 및 관련 컨텐츠가 모두 포함됩니다.
<div class="popular-items-container">: 캐러셀의 메인 컨테이너입니다. 캐러셀 아이템과 캐러셀 제어 버튼들을 포함하고 있습니다.
<div class="popular-items-list">: 실제 캐러셀 슬라이드가 들어가는 부분입니다. 여기에는 여러 개의 .popular-item이 가로로 나열됩니다.
<div class="popular-item">: 각각의 캐러셀 아이템입니다. 이 예제에서는 상품 이미지를 포함하고 있습니다.
<div class="popular-item-buttons-container">: 캐러셀을 좌우로 움직이게 하는 버튼을 담은 컨테이너입니다.

다음 내용이 궁금하다면?

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