How to execute a scroll mechanism when user clicks right/left clickable image using vanilla javascript

Question

I have a page where I want users to be able to scroll right/left by pressing an right/left image arrow. But im not sure how to connect the clickable images to the overflow-x mechanism of the html to scroll right/left.

CSS contain all images where users can scroll

.imgScroll{
margin: 0 auto;
width: 70%;
overflow-x: scroll;
overflow-x: hidden;
white-space:nowrap
}

.arrows{(clickable arrows, to scroll right/left)
position: absolute;
opacity: 0.5;
top: 20px;
cursor: pointer;
}

PHP where all images are set to the scroll box

(while loop execute do the following)
$childImg .= "<img src='../ProductImages/ChildImages/$childName' 
class='imgBotSize' onclick='openNav()'>";

HTML

<div id="botWrapper">
     <?php echo "<p1>" . $pDetails . "</p1>"?>
     <div id="imgBot">
         <div id="imgBoxBot">
             <div class="arrows" style="right: 180px">
                 <img src="../arrow-right.png" width="70px" height="70px">
              </div>
              <div class="arrows" style="left: 180px">
              <img src="../arrow-left.png" width="70px" height="70px">
               </div>
               <div class="imgScroll">
                    <?php echo $childImg;?>
                </div>
          </div>
      </div>
</div>

Answer 1

Looks like you're trying to create an image carousel.

There's a nice image carousel here: kenwheeler.github.io/slick and you can set different options for how you want it displayed.