Skip to main content
Practice

Carousel HTML

Example Code​

Let's build out the structure of a carousel using HTML.

Below is the complete HTML code for a carousel, and we will go through it step by step.

Carousel HTML
<section id="memory" class="container">
  <div class="content-text">
    <h2>Memories</h2>
    <p>These are my precious memories</p>
    <div class="slideshow-container">
      <div class="my-slides fade">
        <img
          src="https://images.pexels.com/photos/1099680/pexels-photo-1099680.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
          class="slide-image"
        />
        <div class="slide-text">Image Description 1</div>
      </div>

      <div class="my-slides fade">
        <img
          src="https://images.pexels.com/photos/958545/pexels-photo-958545.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
          class="slide-image"
        />
        <div class="slide-text">Image Description 2</div>
      </div>

      <div class="my-slides fade">
        <img
          src="https://images.pexels.com/photos/1640774/pexels-photo-1640774.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
          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>
    <br />

    <div style="text-align: center">
      <span class="dot" onclick="currentSlide(1)"></span>
      <span class="dot" onclick="currentSlide(2)"></span>
      <span class="dot" onclick="currentSlide(3)"></span>
    </div>
  </div>
</section>

Let's break down the code step by step:


Container

Carousel Container HTML
<section class="container">
  <div class="content-text">...</div>
</section>

We created a container to place the carousel in a specific section of the webpage.

The container uses the HTML <section> tag to designate the carousel's area on the webpage.

We wrap it with a <section> tag and use a container class to identify this container.

Inside the container, we create a <div> tag and apply the content-text class to style the title and description.


Title and Description

Carousel Title & Description HTML
<h2>Memories</h2>
<p>These are my precious memories</p>

For a short title and description of the content included in the carousel,

we use the <h2> and <p> tags.


Slides

Carousel Slides HTML
<div class="slideshow-container">
  <div class="my-slides fade">
    <img
      src="https://images.pexels.com/photos/1099680/pexels-photo-1099680.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
      class="slide-image"
    />
    <div class="slide-text">Image Description 1</div>
  </div>

  <div class="my-slides fade">
    <img
      src="https://images.pexels.com/photos/958545/pexels-photo-958545.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
      class="slide-image"
    />
    <div class="slide-text">Image Description 2</div>
  </div>

  <div class="my-slides fade">
    <img
      src="https://images.pexels.com/photos/1640774/pexels-photo-1640774.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
      class="slide-image"
    />
    <div class="slide-text">Image Description 3</div>
  </div>
  ...
</div>

The outermost <div> with the slideshow-container class acts as a container for the carousel's content—the "slides."

This container holds three slides, each consisting of an image and a description.

Each slide is wrapped in a <div> with the my-slides class. Although the example code shows three slides, you can add more slides as needed.

Slide Example
<div class="my-slides fade">Slide Content</div>

Each slide displays an image using the HTML <img> tag and applies the slide-image class to style the slide image. Additionally, a <div> with the slide-text class is used to add descriptions to the images.

Slide Example
<div class="my-slides fade">
  <img
    src="https://images.pexels.com/photos/1099680/pexels-photo-1099680.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
    class="slide-image"
  />
  <div class="slide-text">Image Description 1</div>
</div>

Previous / Next Buttons

Previous/Next Buttons HTML
<a class="prev" onclick="plusSlides(-1)">&#10094;</a>

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

The buttons for navigating to the previous and next slides in the carousel are constructed using HTML <a> elements.

The button with the prev class moves the carousel to the previous slide, while the button with the next class moves it to the next slide.

When a user clicks a button, the corresponding JavaScript function is called.

For example, clicking the button with the prev class calls the plusSlides(-1) function, moving the carousel to the previous slide.

Similarly, clicking the button with the next class calls the plusSlides(1) function, moving the carousel to the next slide.


Indicators

Indicator Buttons HTML
<div style="text-align: center">
  <span class="dot" onclick="currentSlide(1)"></span>
  <span class="dot" onclick="currentSlide(2)"></span>
  <span class="dot" onclick="currentSlide(3)"></span>
</div>

Indicators show which slide is currently being displayed and allow users to click an indicator to jump to a specific slide.

For this carousel, we will use dots as indicators.

Each indicator is a <span> element with the dot class.

When an indicator is clicked, the currentSlide function is called to jump to the specified slide.


So far, we have used HTML to build the layout of the carousel.

However, as mentioned earlier, HTML alone won't allow us to transition slides or make the carousel rotate. To achieve this, we need to use JavaScript.

Before implementing functionality with JavaScript, let's style the carousel using CSS.

Want to learn more?

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