JSFiddle - React, Tailwind, and code Playground

HTML

<div class="gallery">
            <div class="photos">
                <img src="./img/section1.jpg" alt="">
                <img src="./img/section2.jpg" alt="">
                <img src="./img/section3.jpg" alt="">
            </div>
            <div class="buttons">
                <a class="prev" href="">Prev</a>
                <a class="next" href="">Next</a>
                <!-- <input type="button" value="Prev">
                <input type="button" value="Next"> -->
            </div>
 </div>

CSS

.gallery {
    width: 600px;
    margin: 30px auto;
    text-align: center;
}

.gallery .photos img {
    width: 100%;
    display: none;
}

.gallery .photos img:first-child {
    display: block;
}

JavaScript

var btn_prev = document.querySelector('.gallery .buttons .prev');

var btn_next = document.querySelector('.gallery .buttons .next');
var images = document.querySelectorAll('.gallery .photos img');
var i = 0;

btn_prev.onclick = function() {
   
}

btn_next.onclick = function () {
   images[i].style.display = 'none';
}