본문으로 건너뛰기

캐러셀 구성하기

캐러셀 구성하기

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

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


<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">: 캐러셀을 좌우로 움직이게 하는 버튼을 담은 컨테이너입니다.