Guidelines
Practice
캐러셀 구성하기
캐러셀은 여러 개의 아이템을 가로로 나열하여 한 번에 하나 이상의 아이템을 보여주는 구성 요소입니다.
사용자는 좌우 버튼을 사용하여 다른 아이템으로 스크롤할 수 있습니다. 이는 비즈니스 상품이나 광고 등을 돋보이게 하는 데 효과적입니다.
<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">
: 캐러셀을 좌우로 움직이게 하는 버튼을 담은 컨테이너입니다.
Guidelines
AI Tutor
Publish
Design
Upload
Notes
Favorites
Help