Want create site? Find Free WordPress Themes and plugins.

Image Slider Using JavaScript. Learn How To Create?

Image Slider using JavaScript. Image slider is the basic requirement now for today’s websites. Many websites use image slider to show their content like ads, offers, and Images for product. Websites like amazon, flip kart, and other also uses Image slider to showcase their products. There are many codes available in the websites which gives you basic idea regarding how to make an Image Slider. But they all use mostly J Query or other JavaScript framework. Here we are going to learn how to create an Slider using pure JavaScript only.

Image Slider
Image Slider

HTML PART FOR IMAGE SLIDER

Let us Start to create HTML for our Slider.

  1.  Here we will create a basic html page having html, head, body tag.
  2. In body we will add a wrapper div and two buttons for next and previous.
  3. Here we will create three columns consider them as your image.
  4. I have named them as Image 1,Image 2, and so on up to Image 6.
  5. You can use Images as you want in this Image divs.
<html><head></head><body><div id="wrapper"><button onclick="prev()"><<</button> <div id="item-row"> <div id="row"> <div class="item" style="border:0.1px solid red;">Image 1</div> <div class="item"style="border:0.1px solid red;">Image 2</div> <div class="item" style="border:0.1px solid red;">Image 3</div> <div class="item" style="border:0.1px solid red;">Image 4</div> <div class="item" style="border:0.1px solid red;">Image 5</div> <div class="item" style="border:0.1px solid red;">Image 6</div> </div> </div><button onclick="next()">>></button></div></body></html>

CSS for Slider

  1. For Slider we are using CSS as a very important component.
  2. We have fixed the width of parent div of our Images.
  3. The parent div has given CSS property overflow-x:hidden which limits the number of Images.
  4. We have given position relative and left as 0 initially.
  5. On click we are gonna move the Images in with just one line of code of JavaScript.
body{
position:absolute;
right:0;
left:0;
top:0;
bottom:0;
margin:0;
padding:0;
}
#wrapper{
display:flex;
justify-content:center;
width:100%;

}
#item-row{
max-width:720px;
width:100%;
height:400px;
overflow-x:hidden;

}
#row{
transition:2s;
left:0;
height:400px;
display:flex;
position:relative;
}

.item{
min-width:240px;
font-size:30px;
text-align:center;
display:flex;
font-family:lato;
margin-right:5px;
height:400px;
flex-direction:column;
justify-content:space-between;
}
.item:last-child{
margin-right:4px;
}
.item:last-child(3){
margin-right:4px;
}
button{
background-color:black;

font-weight:600;
color:white;
border:1px solid black;
outline:none;
}
button:hover{
cursor:pointer;
}

JavaScript for Slider

  1. Here we are  using two buttons for next and previous.
  2. We will write two JavaScript functions of just one line code here which will give us the effect of Slider.
function prev(){
	
document.getElementById("row").style.left ='0';

}
function next(){
	
document.getElementById("row").style.left ='-720px';

}

Best YOUTUBE SEO TECHNIQUE TO RANK HIGHER

Did you find apk for android? You can find new Free Android Games and apps.