Javascript SlideShow - Hallo sahabat Dev-Create, Pada Artikel yang anda baca kali ini dengan judul Javascript SlideShow, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan
Artikel How To Create Images Slider In Javascript,
Artikel images,
Artikel javascript,
Artikel javascript images slider,
Artikel javascript slider,
Artikel javascript slideshow,
Artikel SlideShow, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.
Judul : Javascript SlideShow
link : Javascript SlideShow
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 .
Anda sekarang membaca artikel Javascript SlideShow dengan alamat link https://dev-create.blogspot.com/2018/02/javascript-slideshow.html
Judul : Javascript SlideShow
link : Javascript SlideShow
Javascript SlideShow
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:
Demikianlah Artikel Javascript SlideShow
Sekianlah artikel Javascript SlideShow kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.
Anda sekarang membaca artikel Javascript SlideShow dengan alamat link https://dev-create.blogspot.com/2018/02/javascript-slideshow.html
