Applying CSS Styles to a Carousel

Now that we have completed the styling of the carousel container, let's style the carousel itself.

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>

Copy
.slideshow-container {
    padding-top: 24px;
    max-width: 1000px;
    position: relative;
    margin: auto;
}

.my-slides {
    display: none;
}

.slide-image {
    width: 100%;
    height: 320px;
}

.slide-text {
    color: black;
    font-size: 16px;
    padding: 8px 12px;
    position: absolute;
    bottom: 8px;
    width: 100%;
    text-align: center;
}

/* Fading animation */
.fade {
    animation-name: fade;
    animation-duration: 1.5s;
}

@keyframes fade {
    from {
        opacity: 0.4;
    }
    to {
        opacity: 1;
    }
}

The container for the carousel applies CSS using the slideshow-container class. This class uses the padding: 24px property to add a 24px margin at the top, and the max-width property limits the maximum width to 1000px.

By using the position: relative; property, the container is positioned relatively, and the margin: auto; property centers it by automatically adding equal margins on the left and right sides.

The slides of the carousel apply CSS using the my-slides class.

The display: none; property ensures all the slides are initially hidden. We start by hiding all the slides and use CSS and JavaScript to display only the desired slide.

This approach prevents multiple slides from appearing simultaneously in the carousel.

The images within the slide apply CSS using the slide-image class.

The image width is set to 100% with width: 100%;, and the height is fixed at 320px using height: 320px;.

The text inside the slide applies CSS using the slide-text class.

The text color is set to black using the color: black; property, and the font size is set to 16px with font-size: 16px;.

padding: 8px 12px; adds an 8px margin on the top and bottom and a 12px margin on the left and right sides of the text.

By using position: absolute, the text is positioned absolutely. Absolute positioning means the element is positioned relative to its nearest positioned ancestor, which in this case is the "slideshow-container" with "position: relative". Without position: absolute, the text would overflow outside of the carousel, so be cautious.

The bottom: 8px; property places the text 8px above the bottom of the slide, and width: 100%; sets its width to 100%.

Lastly, the text-align property centers the text.