How to create an image slider works with radio button?

A slider is a series of images that appear in sequence. Now, we will see an image slider working with radio buttons using HTML & CSS in which the image slides up, on clicking the radio button.

Approach

The HTML defines a container for an image slider with five radio buttons to control the slides. Each radio button corresponds to one image, allowing users to navigate through the images.
The CSS styles the slider, making it center-aligned within the viewport. It also styles the images, setting their size and making the slider overflow hidden to show only one image at a time.
The .imgs_slides class sets the container width to 500%, enabling the five images to be displayed in a horizontal row. Each slide is set to 20% width, ensuring they all fit within the container.
The radio buttons are hidden using display: none; to prevent them from showing. When a radio button is checked, CSS rules adjust the margin-left of the .first slide, shifting the visible image accordingly.
The navigation buttons are styled to appear below the images. They use the hover effect to change color on mouseover. Clicking a navigation button checks the corresponding radio button, triggering the CSS animation to display the appropriate image.

Example: The example below shows how to create an image slider that works with a radio button.

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />

    <title>Image Slider</title>
    <style>

        /* CSS code */
        body {
            margin: 0;
            padding: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .slider {
            width: 800px;
            height: 500px;
            border-radius: 10px;
            overflow: hidden;
        }

        .imgs_slides {
            width: 500%;
            height: 500px;
            display: flex;
        }

        /* We have to set display: none;
          If not, all of our images would 
          be visible at the same time */
        .imgs_slides input {
            display: none;
        }

        .slide {
            width: 20%;
            transition: 2s;
        }

        .slide img {
            width: 800px;
            height: 500px;
        }

        /* css for slide navigation */
        .navigation {
            position: absolute;
            width: 800px;
            margin-top: -40px;
            display: flex;
            justify-content: center;
        }

        .navigation-btn {
            border: 2px solid #de6a23;
            padding: 5px;
            border-radius: 10px;
            cursor: pointer;
            transition: 1s;
        }

        .navigation-btn:not(:last-child) {
            margin-right: 40px;
        }

        .navigation-btn:hover {
            background: #de6a23;
        }

        /* The checked attribute is used with
        reference to <input type="radio">, 
        when radio button is clicked the 
        class will shift w.r.t  left margin 
        as mentioned which results in image 
        slider */
        #radio1:checked~.first {
            margin-left: 0;
        }

        #radio2:checked~.first {
            margin-left: -20%;
        }

        #radio3:checked~.first {
            margin-left: -40%;
        }

        #radio4:checked~.first {
            margin-left: -60%;
        }

        #radio5:checked~.first {
            margin-left: -80%;
        }
    </style>
    <link rel="stylesheet" type="text/css" 
            href="styles.css" />
</head>

<body>
    <center>

        <!-- Image slider start -->
        <div class="slider">
            <div class="imgs_slides">

                <!-- Radio buttons start -->
                <input type="radio" name="radio-btn" id="radio1" />

                <input type="radio" name="radio-btn" id="radio2" />

                <input type="radio" name="radio-btn" id="radio3" />

                <input type="radio" name="radio-btn" id="radio4" />

                <input type="radio" name="radio-btn" id="radio5" />

                <!-- Radio buttons end -->
                <!-- Embedding  images start -->
                <div class="first slide">
                    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210105130612/img1.PNG" />
                </div>
                <div class="slide">
                    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210105130614/img2.PNG" />
                </div>
                <div class="slide">
                    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210105130615/img3.PNG" />
                </div>
                <div class="slide">
                    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210105130616/img4.PNG" />
                </div>
                <div class="slide">
                    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210105130617/img5.PNG" />
                </div>
                <!-- Embedding images end -->
            </div>

            <!-- Navigation start -->
            <div class="navigation">
                <label for="radio1" class="navigation-btn">
                </label>
                <label for="radio2" class="navigation-btn">
                </label>
                <label for="radio3" class="navigation-btn">
                </label>
                <label for="radio4" class="navigation-btn">
                </label>
                <label for="radio5" class="navigation-btn">
                </label>
            </div>
            <!-- Navigation end -->
        </div>
        <!-- Image slider end -->
    </center>
</body>

</html>

Output:

How to create an image slider works with radio button?

Approach

Explore