JSFiddle - React, Tailwind, and code Playground

HTML

<div id="all">
<img src="https://hotncoldcurry.files.wordpress.com/2013/03/smiley.jpg" alt="happy" class="photo_img">


<img src="https://hotncoldcurry.files.wordpress.com/2013/03/smiley.jpg" alt="happy" class="photo_img">
    
<div id="navigation">
    <div class="button" id="previous"></div>
    <div class="button" id="next"></div>
</div>
</div>

CSS

#all {
    text-align: center;
}

img.photo_img { 
max-width:100%;
max-height: calc(100% - 60px);
margin-top:30px;
}

#navigation {
    width:100%;
    height:50%;
    top:0;
    left:0;
    position:fixed;
}

#previous {
    width:100%;
    height:50%;
    top:0;
    left:0;
    position:fixed;
    opacity:0.5;
    background:black;
    cursor:pointer;
}

#next {
    width:100%;
    height:50%;
    bottom:0;
    left:0;
    position:fixed;
    opacity:0.5;
    background:red;
    cursor:pointer;


}

JavaScript

$(function() {
    $("#next").on("click", function() {
        $("body").animate({"scrollTop": window.scrollY+100}, 100);
        return false;
    });
}); 

$(function() {
    $("#previous").on("click", function() {
        $("body").animate({"scrollTop": window.scrollY-100}, 100);
        return false;
    });
});