How to Create Image Slider using HTML and CSS

In this article, we will see how to create an image slider in HTML and CSS.

A step-by-step guide to creating an image slider

1. Create a <div> tag and set the classname “slider” Inside it, you should create two <div> tags. Set the classname “images” for the 1st <div> and “dots” for the 2nd <div> tag.
2. Inside the classname “images”, create 4 <input> tags and set the “type” attribute to “radio”, and the “name” attribute to “slide” for all. And set the input “id” attribute to “img1” for 1st input, “img2” for 2nd, “img3” for 3rd input, and “img4” for 4th input. You should create as many <input> tags as you are going to insert images.
3. Inside the div classname “images”, you should insert images using <img> tag and give your image path in the “src” attribute. Then set the class name for each <img> tag like m1, m2, m3 m4, etc as in the below code. And set the <img> “alt” attribute to the value of the input “id” attribute given earlier. Note that: Your input “id” attribute value and <img> “alt” attribute value must be the same.
4. Inside the classname “dots” <div>, you need to create as many <label> tags as you have inserted images.
5. Then in CSS, select the body tag and set the background color. Centering content horizontally and vertically using “justify-content” and “align-items” properties.
6. Select “img” tag in CSS, and set the “transition” property to “all 0.15s ease”. Select the “label” tag in CSS, and set the “transition” property to “all 0.15s ease”. Here, I have mentioned only important CSS styling, so you should see the below example code.
7. And select <input> idname using CSS idselector with pseudo-class “checked” and select <img> classname using the class selector in CSS. For example, “#img1:checked ~ .m1”. Set the “margin-left” property to “0” for 1st image. Then select the 2nd image like that “#img1:checked ~ .m1” and set the “margin-left” property to “100%”. If you have inserted multiple images, select them all individually like that and set the CSS “margin-left” property to increase to 100%.
8. After applying these steps correctly, your image slider will be displayed.

Live Preview:

See the Pen
image slider by Wonderdevelop (@wonderdevelop)
on CodePen.

Example Codes

HTML

<div class="slider">
         <div class="images">
            <input type="radio" name="slide" id="img1">
            <input type="radio" name="slide" id="img2">
            <input type="radio" name="slide" id="img3">
            <input type="radio" name="slide" id="img4">
            <img src="1.jpg" class="m1" alt="img1">
            <img src="2.jpg" class="m2" alt="img2">
            <img src="3.jpg" class="m3" alt="img3">
            <img src="4.jpg" class="m4" alt="img4">
         </div>
      
      <div class="dots">
         <label for="img1"></label>
         <label for="img2"></label>
         <label for="img3"></label>
         <label for="img4"></label>
      </div>
  </div>

CSS

*{
            box-sizing: border-box;
            margin: 0;
            padding: 0;

         }
         body{
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: rgb(25, 12, 40);
         }
         .slider{
            position: relative;
            width: 60%;
            overflow: hidden;
         }
         .images{
            display: flex;
            width: 100%;
         }
          img{
            height: 400px;
            width: 100%;
            transition: all 0.15s ease;
         }
         .images input{
            display: none;
         }
         .dots{
            display: flex;
            justify-content: center;
            margin: 5px;
         }
         .dots label{
            height: 20px;
            width: 20px;
            border-radius: 50%;
            border: solid #fff 2px;
            cursor: pointer;
            transition: all 0.15s ease;
            margin: 5px;
         }
         .dots label:hover{
            background: #fff;
         }
         #img1:checked ~ .m1{
            margin-left: 0;
         }
         #img2:checked ~ .m2{
            margin-left: -100%;
         }
         #img3:checked ~ .m3{
            margin-left: -200%;
         }
         #img4:checked ~ .m4{
            margin-left: -300%;
         }