Styling the Carousel with CSS

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

Example Code

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

Carousel CSS

.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 carousel container is styled using the slideshow-container class in CSS. This class utilizes the padding-top: 24px property to add a 24px padding at the top and the max-width property to limit the maximum width to 1000px.

The position: relative; property positions the container relatively, and the margin: auto; property automatically adds margin on both sides to center it.

The carousel slides are styled using the my-slides class in CSS.

The display: none; property ensures that all slides are hidden by default. We will use CSS and JavaScript to display only the desired slide, preventing multiple slides from appearing at the same time.

The images inside the slides are styled using the slide-image class in CSS.

The width: 100%; property sets the width of the images to 100%, and the height: 320px; property fixes the height to 320px.

The text inside the slides is styled using the slide-text class in CSS.

The color: black; property sets the text color to black, and the font-size: 16px; property sets the font size to 16px.

The padding: 8px 12px; property adds an 8px padding above and below the text, and a 12px padding on the left and right.

The position: absolute; property positions the text absolutely. When an element is positioned absolutely, it is placed relative to its closest positioned ancestor that is not static. In this case, the text is positioned relative to the slideshow-container which has position: relative;. Without position: absolute;, the text would appear outside the carousel.

The bottom: 8px; property positions the text 8px from the bottom of the slide, while the width: 100%; property sets the width to 100%.

Finally, the text-align property is used to center-align the text.

Want to learn more?

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

Learn moreSign In