Skip to main content
Practice

Creating a Carousel

A carousel is a component that displays several items horizontally, showing users one or more items at a time.

Users can scroll to other items using left and right buttons. This is effective in 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">: Outer container for the entire carousel. All related content and the carousel itself are included here.

  • <div class="popular-items-container">: Main container for the carousel. It includes the carousel items and control buttons.

  • <div class="popular-items-list">: The part that holds the actual carousel slides. Multiple .popular-item elements are arranged horizontally here.

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

  • <div class="popular-item-buttons-container">: Container that holds the buttons to move the carousel left and right.

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.