<!DOCTYPE html>
<html>
<title>YUSUF ERENSOY</title>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<style type=”text/css”>
.w3-animate-right{
position:relative;
animation:animatetop 0.9s;
}
@keyframes animatetop{
from{
right:-300px;opacity:0;
}
to{
right:0;opacity:1;
}
}
#yusufslider{
width:100%;
height:600px;
overflow:hidden;
}
#yusufslider img{
width:100%;
height:500px;
}
#yusufslider button{
display:none;
bottom:50%;
cursor:pointer;
position:relative;
z-index:5;
background:#FF0000;
color:#FFF;
font-size:25px;
font-weight:bold;
border:0px;
width:40px;
height:50px;
}
</style>
<div id=”yusufslider” onmouseover=”gelgit()” onmouseout=”gitgel()”>
<img class=”mySlides w3-animate-right” src=”http://erensoyyapi.com/wp-content/themes/ERENSOYYAPI2016/images/dis-cephe-mantolama.png”>
<img class=”mySlides w3-animate-right” src=”http://erensoyyapi.com/wp-content/themes/ERENSOYYAPI2016/images/alcipan-asma-tavan.png”>
<img class=”mySlides w3-animate-right” src=”http://erensoyyapi.com/wp-content/themes/ERENSOYYAPI2016/images/kartonpiyer.png”>
<img class=”mySlides w3-animate-right” src=”http://erensoyyapi.com/wp-content/themes/ERENSOYYAPI2016/images/alci-siva.png”>
<button style=”float:left;” id=”geri” onclick=”plusDivs(-1)”><</button>
<button style=”float:right;” id=”ileri” onclick=”plusDivs(1)”>></button>
</div>
<script>
function gelgit() {
document.getElementById(“geri”).style.display=”block”;
document.getElementById(“ileri”).style.display=”block”;
}
function gitgel() {
document.getElementById(“geri”).style.display=”none”;
document.getElementById(“ileri”).style.display=”none”;
}
</script>
<script>
var slideIndex = 0;
showDivs(slideIndex);
carousel();
function butongelgit() {
document.getElementById(gelgit).style.display=”block”;
}
function carousel() {
var i;
var x = document.getElementsByClassName(“mySlides”);
for (i = 0; i < x.length; i++) {
x[i].style.display = “none”;
}
slideIndex++;
if (slideIndex > x.length) {slideIndex = 1}
x[slideIndex-1].style.display = “block”;
setTimeout(carousel, 4000); // Change image every 2 seconds
}function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName(“mySlides”);
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = “none”;
}
x[slideIndex-1].style.display = “block”;
}
</script>
</body>
</html>
bunun orjinal hali sadece kendiliğinden değişen resimdi. Bende kendime göre ileri geri butonu ekleyip geçişleri biraz süsledim 
