Skip to main content
Practice

Creating Carousel Structure 2

Continuing from the previous lesson, we will further detail the structure of a carousel.


Slides​

Carousel Slide 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> element with the slideshow-container class acts as the container for the carousel content, which includes the "slides".

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

Each slide is wrapped in a <div> with the class my-slides. The example code above is composed of three slides, but

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

you can add more slides like the example above.

Each slide displays an image using the HTML <img> tag and applies styles to the slide image using the slide-image class. Additionally, a <div> element with the slide-text class is used to provide a description for the image.

Example Slide Composition
<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>

Want to learn more?

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