본문으로 건너뛰기

Creating a Carousel

A carousel arranges multiple items horizontally to show one or more items at a time. Users can scroll through different items using left and right buttons. This is effective for highlighting business products or advertisements.


<div class="popular-box">
...
<!-- Carousel container -->
<div class="popular-items-container">
<div class="popular-items-list margin-left-auto">
<!-- Carousel item -->
<div class="popular-item">
<img
class="cover-img"
src="https://assets.codefriends.net/templates/web/promotion-1/assets/famous-1.png"
/>
...
</div>
...
</div>
<!-- Carousel buttons -->
<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">: This is the outer container for the entire carousel. It includes the carousel and all related content.

  • <div class="popular-items-container">: The main container of the carousel. It contains the carousel items and the carousel control buttons.

  • <div class="popular-items-list">: This is where the actual carousel slides are located. Several .popular-items are arranged horizontally here.

  • <div class="popular-item">: Each individual carousel item. In this example, it includes a product image.

  • <div class="popular-item-buttons-container">: This container holds the buttons for moving the carousel left and right.