Javascript autoplay slider (no arrow controls)

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="shortcut icon" href="Favicon.gif" type="image/x-icon">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Javascript autoplay slider (no arrow controls)</title>
<style>
img {
    position: absolute;
    width: 100%;
    height: 100%;
}

#section {
    position: relative;
    margin: auto;
    width: 800px;
    height: 500px;
    border: 5px solid red;
    border-radius: 5px;
}


.clone{
position:absolute;
top:0;
right:0;
}


</style>
</head>

<body>
    <section id='section'>
    <img src='https://1xpto.netlify.app/pics/3.jpg' />
    <img src='https://1xpto.netlify.app/pics/4.jpg' />
    <img src='https://1xpto.netlify.app/pics/7.jpg' />
    <img src='https://1xpto.netlify.app/pics/pic1.jpg' />
    <img src='https://1xpto.netlify.app/pics/pic2.png' />
    <img src='https://1xpto.netlify.app/pics/pic3.png' />
    <img src='https://1xpto.netlify.app/pics/car.jpeg' />
    </section>


    <a class='clone' href='https://www.youtube.com/channel/UCqLpDK0eOsG1eEeF9jOUZkw'><img style='width:200px;position:relative;' src='https://1xpto.netlify.app/pics/clone.png'/></a>


    <script>

image = document.getElementsByTagName('img');
i = 6;

del = setInterval(bam, 2000);
function bam() {
    image[i].style.display = 'none';
    i--;
    if (i == -1) {
        i = 6;
        for (a = 0; a < image.length; a++) {
            image[a].style.display = 'block';
        }
    }
}


</script>
</body>

</html>