Skip to main content
Practice

What is a Carousel?

Let's learn about a carousel, which is a rotating slide show for content such as images.

A carousel, in English, refers to a merry-go-round.

Just like the multiple horses on a merry-go-round that go in a circle, applying a carousel to a website allows multiple images or contents to automatically switch at regular intervals, displaying them to the user.

Carousels are commonly used in image galleries, product promotions, announcements, and other areas. They are often placed at prominent parts of the webpage, such as the top or middle, capturing the user's attention.

Moreover, because the carousel can automatically rotate content, it can engage users by displaying the next piece of content without requiring them to click.


Carousel Code in a Template
<div class="slideshow-container">
  <div class="my-slides fade">
    <img src="https://assets.codefriends.net/assets/images/bio-website/carousel-1.webp" class="slide-image" />
    <div class="slide-text">Image Description 1</div>
  </div>

  <div class="my-slides fade">
    <img src="https://assets.codefriends.net/assets/images/bio-website/carousel-2.jpeg" class="slide-image" />
    <div class="slide-text">Image Description 2</div>
  </div>

  <div class="my-slides fade">
    <img src="https://assets.codefriends.net/assets/images/bio-website/carousel-3.jpeg" class="slide-image" />
    <div class="slide-text">Image Description 3</div>
  </div>

  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>

Want to learn more?

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