sadet48 - JavaScript ile Basit Slayt Yapma

Basit Slayt Yapımı

<!DOCTYPE html>
<html>
<head>
	<title>Basit Slayt Yapımı</title>
	<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Nunito');
*{margin: 0;padding: 0;font-family: 'Nunito',sans-serif;box-sizing: border-box}
p#app{
color:#31DFC4;
font-size: 1cm;
text-align: center; 
padding: 15px;
}
#slider
{
  width: 460px;
  height: 310px;
  margin: 0 auto;
  position: relative;  
  border: 7px solid #f5f5f5;
  overflow: hidden; 
}
#box { 
width: 460px;
height: 310px;
background: #FFF;
z-index: -1;
}
#box img
{	
margin-top:0px;
  width: 460px;
  height: 296px;
}
button {
color: #FFF;
background: rgba(0, 0, 0, 0.2);
padding: 5px 7px 7px 7px;
width: 40px;
height: 40px;
border-radius: 100%;
border: none;
position: absolute;
z-index: 1;
cursor: pointer;
}
button:hover{color:#000;background: #FFF;}
#btn1{
top: 45%;
left: 0px;
}
#btn2{
top: 45%;
right: 0px;
}
</style>
</head>
<body>
<p id="app"></p>
<div id="slider">
<button id="btn1" onclick="prewImage()">
  <i class="fa fa-angle-left fa-2x" aria-hidden="true"></i>
</button>
<button id="btn2" onclick="nextImage()">
  <i class="fa fa-angle-right fa-2x" aria-hidden="true"></i>
</button>
  <div id="box">
<img src="https://img.webme.com/pic/s/sadet48/sonbahar1.jpg">
<img src="https://img.webme.com/pic/s/sadet48/sonbahar2.jpg">
<img src="https://img.webme.com/pic/o/okulsa/sonbahar3.jpg">
<img src="https://img.webme.com/pic/o/okulsa/sonbahar4.jpg">
<img src="https://img.webme.com/pic/o/okulsa/sonbahar5.jpg">
  </div>
</div>
<script>
var obj = new Object();
    obj.heading ="Basit Slayt Yapımı";
document.getElementById("app").innerHTML=obj.heading;
var slider_cont = document.getElementById("box");
var image = ['https://img.webme.com/pic/s/sadet48/sonbahar1','https://img.webme.com/pic/s/sadet48/sonbahar2','https://img.webme.com/pic/o/okulsa/sonbahar3','https://img.webme.com/pic/o/okulsa/sonbahar4','https://img.webme.com/pic/o/okulsa/sonbahar5'];
var i = image.length;
function nextImage(argument) {
  if(i<image.length){
    i=i+1;
  }else {
    i = 1;
  }
  slider_cont.innerHTML = "<img src="+image[i-1]+".jpg>";
}
function prewImage(argument) {
  if(i<image.length+1 && i>1){
    i=i-1;
  }else {
    i = image.length;
  }
  slider_cont.innerHTML="<img src="+image[i-1]+".jpg>";
}
</script>
</body>
</html>