How to Create an Image Slideshow in HTML and CSS

Creating an image slideshow in HTML and CSS may seem challenging at first, especially if you’re a beginner. However, building a basic slider is easier than you might think and can be achieved with just a few lines of code. In this article, we will show you how to create an image slideshow in HTML and CSS, without the need for JavaScript. We’ll also provide an enhanced version that uses JavaScript for additional functionality.

Creating a Simple Image Slideshow with HTML and CSS

To start, here’s a straightforward example of how you can create an image slideshow in HTML and CSS without using any JavaScript.

HTML and CSS Example:

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Custom Image Slideshow</title>
    </head>
    <body>
        <div class="slider-container">
            <div class="menu">
                <label for="slide-dot-1"></label>
                <label for="slide-dot-2"></label>
                <label for="slide-dot-3"></label>
            </div>

            <input class="slide-input" id="slide-dot-1" type="radio" name="slides" checked>
            <img class="slide-img" src="image1.jpg">

            <input class="slide-input" id="slide-dot-2" type="radio" name="slides">
            <img class="slide-img" src="image2.jpg">

            <input class="slide-input" id="slide-dot-3" type="radio" name="slides">
            <img class="slide-img" src="image3.jpg">

        </div>
    </body>
</html>

CSS Styling:

CSS

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

img {
    max-width: 100%;
}

.slider-container {
    max-width: 800px;
    position: relative;
    margin: auto;
    height: 350px;
    overflow: hidden;
}

.menu {
    position: absolute;
    left: 0;
    z-index: 11;
    width: 100%;
    bottom: 0;
    text-align: center;
}

.menu label {
    cursor: pointer;
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #ccc;
    border-radius: 50%;
    margin: 0 0.2em 1em;
}

.slide-input {
    opacity: 0;
}

.slide-img {
    width: 100%;
    height: 300px;
    position: absolute;
    top: 0;
    left: 100%;
    z-index: 10;
    transition: left 0s 0.75s;
}

[id^="slide"]:checked + .slide-img {
    left: 0;
    z-index: 100;
    transition: left 0.65s ease-out;
}

This solution uses pure CSS to handle the slideshow transitions with the :checked selector and radio inputs. Although it’s simple and lightweight, this method has some limitations in terms of flexibility.

Adding JavaScript for Enhanced Functionality

For more dynamic control over your image slideshow, adding a bit of JavaScript allows you to enhance the user experience with navigation buttons and smooth transitions.

HTML and JavaScript Example:

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Custom Image Slideshow with JavaScript</title>
    </head>
    <body>
        <div class="slide-container">
            <div class="custom-slider fade">
                <div class="slide-index">1 / 3</div>
                <img class="slide-img" src="image1.jpg">
                <div class="slide-text">Image 1 Description</div>
            </div>
            <div class="custom-slider fade">
                <div class="slide-index">2 / 3</div>
                <img class="slide-img" src="image2.jpg">
                <div class="slide-text">Image 2 Description</div>
            </div>
            <div class="custom-slider fade">
                <div class="slide-index">3 / 3</div>
                <img class="slide-img" src="image3.jpg">
                <div class="slide-text">Image 3 Description</div>
            </div>
            <a class="prev" onclick="plusSlides(-1)">❮</a>
            <a class="next" onclick="plusSlides(1)">❯</a>
        </div>

        <br>

        <div class="slide-dot">
            <span class="dot" onclick="currentSlide(1)"></span>
            <span class="dot" onclick="currentSlide(2)"></span>
            <span class="dot" onclick="currentSlide(3)"></span>
        </div>

        <script>
            var slideIndex = 1;
            showSlides(slideIndex);

            function plusSlides(n) {
                showSlides(slideIndex += n);
            }

            function currentSlide(n) {
                showSlides(slideIndex = n);
            }

            function showSlides(n) {
                var i;
                var slides = document.getElementsByClassName("custom-slider");
                var dots = document.getElementsByClassName("dot");
                if (n > slides.length) {slideIndex = 1}
                if (n < 1) {slideIndex = slides.length}
                for (i = 0; i < slides.length; i++) {
                    slides[i].style.display = "none";
                }
                for (i = 0; i < dots.length; i++) {
                    dots[i].className = dots[i].className.replace(" active", "");
                }
                slides[slideIndex-1].style.display = "block";
                dots[slideIndex-1].className += " active";
            }
        </script>
    </body>
</html>

CSS Styling for JavaScript Version:

CSS

.custom-slider {
    display: none;
}

.slide-container {
    max-width: 800px;
    position: relative;
    margin: auto;
}

.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    font-size: 30px;
    background-color: rgba(0, 0, 0, 0);
    transition: background-color 0.6s ease;
}

.prev { left: 15px; }
.next { right: 15px; }

.prev:hover, .next:hover {
    background-color: rgba(0, 0, 0, 0.5);
}

.slide-text {
    position: absolute;
    color: white;
    font-size: 15px;
    padding: 15px;
    bottom: 15px;
    width: 100%;
    text-align: center;
}

.slide-index {
    position: absolute;
    top: 0;
    color: white;
    font-size: 13px;
    padding: 15px;
}

.slide-img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    object-position: center;
}

.dot {
    cursor: pointer;
    height: 10px;
    width: 10px;
    margin: 0 2px;
    background-color: #999;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.active, .dot:hover {
    background-color: #111;
}

.fade {
    animation-name: fade;
    animation-duration: 1s;
}

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

Adding JavaScript allows for more control and flexibility over the slideshow, making it easier to implement additional features like navigation buttons and text overlays.

Conclusion

By following this guide, you can easily create an image slideshow in HTML and CSS. Whether you opt for a simple CSS-only solution or integrate JavaScript for more advanced functionality, both approaches ensure smooth transitions and a professional look. Keep your website’s performance in mind when deciding whether to use custom code or a plugin, and choose the best method for your needs.