How to create an image slider works with radio button ? - GeeksforGeeks

18 Jan, 2021
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 property of the radio buttons is only one radio button in a group that can be selected at the same time.We will use radio buttons to select the image that we want to see from the image slider by giving an unique id to each radio button.Next, we will embed all the images one by one and create labels for radio button id’s and will apply necessary CSS properties to achieve the desired output.
The property of the radio buttons is only one radio button in a group that can be selected at the same time.
We will use radio buttons to select the image that we want to see from the image slider by giving an unique id to each radio button.
Next, we will embed all the images one by one and create labels for radio button id’s and will apply necessary CSS properties to achieve the desired output.
Example:
<!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:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS-Misc
HTML-Misc
Picked
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to set space between the flexbox ?
Design a web page using HTML and CSS
Form validation using jQuery
Search Bar using HTML, CSS and JavaScript
How to style a checkbox using CSS?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
How to set input type date in dd-mm-yyyy format using HTML ?
REST API (Introduction)
How to Insert Form Data into Database using PHP ?