How to create an image slider works with radio button ?

Last Updated : 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.

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> 