How To Create Images Slider In Javascript
In This Javascript Tutorial we will See How To Make Two Images SlideShow Using translateX & translateY To Display The Next And Previous Image In JS And Netbeans Editor .
Horizontal Slider Source Code:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Slider 1</title>
<meta charset="windows-1252">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*{box-sizing: border-box}
.main{
border: 1px solid #000;
width:50%;
position: relative;
background: url('../../images/wood-2.jpg');
background-size: cover;
margin: 50px auto;
}
.container{
width: 500px;
height: 250px;
margin: 30px auto;
border: 1px solid #000;
position: relative;
overflow: hidden;
}
.container .slider{
width: 2500px;
height: 250px;
position: absolute;
transition: all 1s ease-in-out;
}
.container .slider .box{
float: left;
width: 500px;
height: 100%;
}
.container .slider .box:first-child{background: red}
.container .slider .box:nth-child(2){background: green}
.container .slider .box:nth-child(3){background: blue}
.container .slider .box:nth-child(4){background: black}
.container .slider .box:last-child{background: yellow}
.main .nav{
position: absolute;
top: 40%;
width: 60px;
height: 60px;
line-height: 60px;
font-size: 45px;
color: #fff;
background: rgba(36,33,32,0.4);
cursor: pointer;
transition: all .5s ease-in-out;
text-align: center;
opacity: 0.5;
}
.main:hover .nav{ opacity: 1 }
.main .nav:hover{
background: rgba(10,10,10,0.6);
color: orangered;
}
.next{right:0}
.previous{left: 0}
</style>
</head>
<body>
<div class="main">
<div class="container">
<div class="slider" id="sld">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
<span class="nav previous" onclick="fPrevious()"><</span>
<span class="nav next" onclick="fNext()">></span>
</div>
<script>
var showed_box = 0;
function fNext(){
showed_box += -500;
if(showed_box < -2000)
showed_box = 0;
document.getElementById('sld').style.transform = "translateX("+showed_box+"px)";
}
function fPrevious(){
showed_box += 500;
if(showed_box > 0)
showed_box = -2000;
document.getElementById('sld').style.transform = "translateX("+showed_box+"px)";
}
</script>
</body>
</html>
OUTPUT:
Vertical Slider Source Code:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Slider 2</title>
<meta charset="windows-1252">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*{box-sizing: border-box}
.main{
border: 1px solid #000;
width:30%;
position: relative;
background: url('../../images/wood-2.jpg');
background-size: cover;
margin: 50px auto;
}
.container{
width: 250px;
height: 500px;
margin: 30px auto;
border: 1px solid #000;
position: relative;
overflow: hidden;
}
.container .slider{
width: 250px;
height: 2500px;
position: absolute;
transition: all 1s ease-in-out;
}
.container .slider .box{
float: left;
width: 250px;
height: 500px;
}
.container .slider .box:first-child{background: red}
.container .slider .box:nth-child(2){background: green}
.container .slider .box:nth-child(3){background: blue}
.container .slider .box:nth-child(4){background: black}
.container .slider .box:last-child{background: yellow}
.main .nav{
position: absolute;
right: 40%;
width: 60px;
height: 60px;
line-height: 60px;
font-size: 45px;
color: #fff;
background: rgba(36,33,32,0.4);
cursor: pointer;
transition: all .5s ease-in-out;
text-align: center;
opacity: 0.5;
}
.main:hover .nav{ opacity: 1 }
.main .nav:hover{
background: rgba(10,10,10,0.6);
color: orangered;
}
.next{top:0}
.previous{bottom: 0}
</style>
</head>
<body>
<div class="main">
<div class="container">
<div class="slider" id="sld">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
<span class="nav previous" onclick="fPrevious()">⇓</span>
<span class="nav next" onclick="fNext()">⇑</span>
</div>
<script>
var showed_box = 0;
function fNext(){
showed_box += -500;
if(showed_box < -2000)
showed_box = 0;
document.getElementById('sld').style.transform = "translateY("+showed_box+"px)";
}
function fPrevious(){
showed_box += 500;
if(showed_box > 0)
showed_box = -2000;
document.getElementById('sld').style.transform = "translateY("+showed_box+"px)";
}
</script>
</body>
</html>
OUTPUT:
