<style>
.slideshow{
    position:absolute;
    margin:auto;
    top:18%;
    left:0;
    right:0;
    width:66%;
    height:73%;
    border:none;
    overflow:hidden;
  	vertical-align:middle;
    z-index:100;
    animation-name:slide;
    animation-duration:11s;
    animation-delay:0s;
    animation-iteration-count:infinite;}
</style>



<div class="slideshow">
<?php
$folder = "uploads";
$images = scandir('uploads');
$amount = count($images);

    for ($i=2; $i<>$amount;$i++)
        {
            $imgid=$i - 1;
            {        echo '<a id="track" target="_blank" href="'.$url.'"><img src="'.$folder . '/' .$images[$i].'" id="'.$imgid.'" class="file2"></a>';
}
}
?>
</div>


<script>
var firstPicturein = document.getElementById("1");
var picturein = firstPicturein;
var i = 0;
function rotateImagesin() {
	//hide 6 images
	for (j = 0; j < 3; j++) {
		// hide current element
	    picturein.style.display = "none";
	    // next element
	    if (i >= document.getElementById("slideshowin").childNodes.length) {
	        i = 0;
	        picturein = firstPicturein;
	    } else {
	        picturein = picturein.nextSibling;
	    };
	    // show the next element
	    picturein.style.display = "inline";
	    i++;
};
};

window.onload = function(){
var curImg = document.getElementById("1").style.display = "inline";
setInterval(rotateImagesin, 11000);
};
</script>