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 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 : 100 vh; 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: 2 s; } .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: 1 s; } .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 */ #radio 1: checked~.first { margin-left : 0 ; } #radio 2: checked~.first { margin-left : -20% ; } #radio 3: checked~.first { margin-left : -40% ; } #radio 4: checked~.first { margin-left : -60% ; } #radio 5: 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.w3wiki.net/wp-content/uploads/20210105130612/img1.PNG" /> </div> <div class= "slide" > <img src= "https://media.w3wiki.net/wp-content/uploads/20210105130614/img2.PNG" /> </div> <div class= "slide" > <img src= "https://media.w3wiki.net/wp-content/uploads/20210105130615/img3.PNG" /> </div> <div class= "slide" > <img src= "https://media.w3wiki.net/wp-content/uploads/20210105130616/img4.PNG" /> </div> <div class= "slide" > <img src= "https://media.w3wiki.net/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: