Hello readers, Hope you are doing amazing. Today in this blog you’ll learn how to create a Simple Image Slider by using Html and CSS only. Guys is a basic method to create a slider which has done without using any javascript code. As we say this is a simple image slider so that's mean guys, there is no support to slide image through swiping your fingers instead you can slide images left to right or right to left using given down side navigator button keys. And guys if you are learn this basic project then you can also improve it by adding some Javascript codes like add fingers swipeable support and automatic slider function for slide images from on side to another without swipe fingers.

Don't worry, We always go to learn web development codes to you by taking simple and easy steps. And we are 100% sure about our codes which is always too simple & clear to understand and helps you learn something new through every blog's post.

Watch Tutorial of Create Simple Image Slider using HTML and CSS Only

Hope you might like these Html & CSS posts

Image Color Overlay effect

Night mode toggle checkbox

Background Color Filled List Items

Now with this video, I'm sure you have understood the basics behind creating this program for those of you still finding it difficult I'll be linking the source code in the description for you.

HTML CODE:

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="style.css">
      <title>How to Create Image Slider using HTML & CSS</title>
  </head>
  <body>
      <div class="container">
          <div class="slides">
              <input type="radio" name="common" id="btn1" checked>
              <input type="radio" name="common" id="btn2">
              <input type="radio" name="common" id="btn3">
              <input type="radio" name="common" id="btn4">
              <input type="radio" name="common" id="btn5">

              <div class="image first">
                  <img src="img1.jpg"/>
              </div>
              <div class="image">
                  <img src="img2.jpg"/>
              </div>
              <div class="image">
                  <img src="img3.jpg"/>
              </div>
              <div class="image">
                  <img src="img4.jpg"/>
              </div>
              <div class="image">
                  <img src="img5.jpg"/>
              </div>
          </div>

          <div class="navigator">
              <label for="btn1" class="bar"></label>
              <label for="btn2" class="bar"></label>
              <label for="btn3" class="bar"></label>
              <label for="btn4" class="bar"></label>
              <label for="btn5" class="bar"></label>
          </div>
      </div>
  </body>
  </html>

CSS CODE:

  *{
      margin: 0;
      padding: 0;
  }
  body{
      background: #282929;
  }
  .container{
      position: absolute;
      top: 50%;
      left: 50%;
      height: 500px;
      width: 800px;
      background: red;
      transform: translate(-50%,-50%);
      border: 1px solid #fff;
      overflow: hidden;
  }
  .navigator{
      display: flex;
      position: absolute;
      left: 50%;
      bottom: 20px;
      transform: translate(-50%);
  }
  .navigator .bar{
      height: 5px;
      width: 45px;
      background: #100f0f;
      cursor: pointer;
      border: 2px solid #000;
      margin-left: 8px;
      box-shadow: 2px 2px 6px #fff,-2px -2px 6px #fff;
  }
  .navigator .bar:hover{
      background: #fff;
  }
  input[type="radio"]{
      position: absolute;
      visibility: hidden;
  }
  .slides{
      display: flex;
      height: 100%;
      width: 500%;
  }
  .image{
      width: 20%;
      transition: 0.4s ease;
  }
  img{
      width: 100%;
      height: 100%;
  }
  #btn1:checked ~ .first{
      margin-left: 0;
  }
  #btn2:checked ~ .first{
      margin-left: -20%;
  }
  #btn3:checked ~ .first{
      margin-left: -40%;
  }
  #btn4:checked ~ .first{
      margin-left: -60%;
  }
  #btn5:checked ~ .first{
      margin-left: -80%;
  }

Note : This given Download button link may contains some ads link. So, you may be clicked 2 - 3 times for downloading the source code files. [Source code includes images also]

How To Create Simple Image Slider using HTML and CSS Only

Watch Tutorial of Create Simple Image Slider using HTML and CSS Only

Post a Comment

Post a Comment

How To Create Responsive Navigation Menu Bar With Search Box Using Html And CSS - WebKitCoding