Creating a Carousel Structure 2

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

Copy
<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 class slideshow-container acts as the container for the carousel's content, which are the "slides."

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

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

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

you can add more slides in the same manner.

Each slide displays an image using the HTML <img> tag with the slide-image class, which applies styling to the slide images. Additionally, a <div> element with the slide-text class is used to add a description to the image.

Copy
<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>