Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

  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:




<!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>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!