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