Skip to content
Related Articles

Related Articles

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:

  1. The property of the radio buttons is only one radio button in a group that can be selected at the same time.
  2. 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.
  3. 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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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=
                </div>
                <div class="slide">
                    <img src=
                </div>
                <div class="slide">
                    <img src=
                </div>
                <div class="slide">
                    <img src=
                </div>
                <div class="slide">
                    <img src=
                </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>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :