<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8">
    <title>JavaScript</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
</head>
<body>
    <div class="wrapper">
        <div class="image">
            <img src="https://picsum.photos/1920/1280/?random" alt="" class="slide">
        </div>
        <div class="image">
            <img src="https://picsum.photos/1920/1281/?random" alt="" class="slide">
        </div>
        <div class="image">
            <img src="https://picsum.photos/1920/1282/?random" alt="" class="slide">
        </div>
        <div class="image">
            <img src="https://picsum.photos/1920/1283/?random" alt="" class="slide">
        </div>
    </div>
    <div>
        <button id="left"><i class="fas fa-arrow-left"></i></button>
        <button id="right"><i class="fas fa-arrow-right"></i></button>
    </div>
</body>
</html>
* {
    margin: 0;
    padding: 0;
}

/* reset button */

button {
    background: none;
    border: none;
}

button:active, button:focus {
  outline: none !important;
}
button::-moz-focus-inner {
  border: 0 !important;
}

/* fullscreen div */

.image {
    display: block;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

/* button  */

#left, #right {
    position: absolute;
    top: 50%;
    font-size: 4rem;
    color: #adb5bd;
    opacity: 0.3;
}

#right {
    right: 0;
}

/* button hover */

#left:hover, #right:hover {
    opacity: 0.8;
    transition: ease 0.5s;
}
var index = document.getElementsByClassName('image');
var length = index.length;
var slide = 0;

// we run through the collection of elements and assign display: none to them;
for (var i = 1; i < index.length; i++) {
    index[i].style.display = 'none';
}
// button to the right;
document.getElementById('right').onclick = function Right () {
    if(slide == length-1){
        index[0].style.display = "block";
        index[slide].style.display = "none";
        slide = 0;
    } else {
        index[slide+1].style.display = "block";
        index[slide].style.display = "none";
        slide++;
    }
}
// button to the left;
document.getElementById('left').onclick = function Left () {
    if(slide <= 0) {
        index[slide].style.display = "none";
        slide = length;
        slide--;
        index[slide].style.display = "block";
    } else {
        index[slide].style.display = "none";
        slide--;
        index[slide].style.display = "block";
    }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.