How to creating an image slider using JavaScript HTML and CSS

Hey friends, today in this blog you'll learn How to creating an image slider using JavaScript HTML and CSS.

In the earlier blog, I have shared How to create a Side Navigation Bar in HTML Using JavaScript and now it's time to How to creating an image slider using JavaScript HTML and CSS.

Hello Friends, We will using HTML, CSS and JavaScript we will make it fun. Today we will learn How to creating an image slider using JavaScript HTML and CSS With Source Code.

So here is the code and my work. Hope you are gonna love this and share with your friends too.

You Can Also Read: How To Create Calculator in HTML Using JavaScript.

You Can Also Read: How to create a Navigation Menu Bar in HTML, CSS and JavaScript.

Step 1) Open a any code Editor in any Devices

Step 2) Create a file and save it index.html with .html extension

Step 3) Paste these code on index.html file and save it (ctrl+s)

Add this Code in index.html Page

 <!DOCTYPE html>  
 <html>  
 <head>  
      <title>Image Slider in JavaScript Using HTML and CSS</title>  
      <link rel="stylesheet" type="text/css" href="style.css">  
 </head>  
 <body>  
      <div class="container">  
           <div class="slides">  
                <div class="slider">  
                     <img src="images/slider-1.jpg">  
                     <div class="text">  
                          <h1>Slider One</h1>  
                     </div>  
                </div>  
                <div class="slider">  
                     <img src="images/slider-2.jpg">  
                     <div class="text">  
                          <h1>Slider two</h1>  
                     </div>  
                </div>  
                <div class="slider">  
                     <img src="images/slider-3.jpg">  
                     <div class="text">  
                          <h1>Slider three</h1>  
                     </div>  
                </div>  
           </div>  
           <button id="nextBtn" onclick="plusSlides(-1)"> < </button>  
           <button id="prevBtn" onclick="plusSlides(1)"> > </button>  
      </div>  
      <script type="text/javascript">  
      var slideIndex = 1;  
      showSlides(slideIndex);  
      function plusSlides(n) {  
           showSlides(slideIndex += n);  
      }  
      function showSlides(n) {  
           var i;  
           var slider = document.getElementsByClassName("slider");  
           if (n > slider.length) {slideIndex = 1}  
           if (n < 1) {slideIndex = slider.length}  
           for (i = 0; i < slider.length; i++){  
                slider[i].style.display = "none";  
           }  
                slider[slideIndex-1].style.display = "block";  
      }  
      </script>  
 </body>  
 </html>

*<link rel="stylesheet" type="text/css" href="css/style.css"> This Code be must be added without these code stylesheet code not run.

Step 4) Again create a file name it style.css with .css extension

Step 5) Paste These Code on style.css Page and save it.

Add this Code in style.css Page

 *{  
      padding: 0;  
      margin: 0;  
      box-sizing: border-box;  
 }  
 body{  
      font-family: sans-serif;  
      background-color: #f4f4f4;  
 }  
 .container{  
      width: 98%;  
      height: 400px;  
      margin: 10px auto;  
      overflow: hidden;  
      position: relative;  
 }  
 .slider{  
      width: 100%;  
      height: 100%;  
      position: relative;  
 }  
 .text{  
      position: absolute;  
      top: 45%;  
      left: 40%;  
      color: #fff;  
      text-transform: uppercase;  
 }  
 .slider img{  
      width: 100%;  
      height: 400px;  
 }  
 #prevBtn,#nextBtn{  
      position: absolute;  
   top: 50%;  
   padding: 5px 12px;  
   border: 0;  
   background-color: #999;  
   color: #ffff;  
   font-size: 30px;  
   cursor: pointer;  
 }  
 #prevBtn:hover,#nextBtn:hover{  
      background-color: #000;  
 }  
 #prevBtn{  
      right: 0;  
 }

Step 6) Now Copy File Path and pate it any browser.

Step 7) See magic.....😊

Thank you...........

E-CODEC

How to creating an image slider using JavaScript HTML and CSS