hgow to hide scroll bar and add buttons in javascript

/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE and Edge */
.example {
  -ms-overflow-style: none;
}html {
    scrollbar-width: none; /* For Firefox */
    -ms-overflow-style: none; /* For Internet Explorer and Edge */
}

html::-webkit-scrollbar {
    width: 0px; /* For Chrome, Safari, and Opera */
}.scoll-pane {
    width: 100%;
    height: auto;
    overflow: auto;
    outline: none;
    overflow-y: hidden;
    padding-bottom: 15px;
    -ms-overflow-style: scroll;  // IE 10+
    scrollbar-width: none;  // Firefox
}

ul {
    display: flex;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

img {
    width: 300px;
    height: 180px;
}

  .scoll-pane::-webkit-scrollbar { 
  display: none;  // Safari and Chrome
  }var button = document.getElementById('slide');
button.onclick = function () {
    var container = document.getElementById('container');
    sideScroll(container,'right',25,100,10);
};

var back = document.getElementById('slideBack');
back.onclick = function () {
    var container = document.getElementById('container');
    sideScroll(container,'left',25,100,10);
};

function sideScroll(element,direction,speed,distance,step){
    scrollAmount = 0;
    var slideTimer = setInterval(function(){
        if(direction == 'left'){
            element.scrollLeft -= step;
        } else {
            element.scrollLeft += step;
        }
        scrollAmount += step;
        if(scrollAmount >= distance){
            window.clearInterval(slideTimer);
        }
    }, speed);
}<div class="container">
  <div class="row">
      <div class="col-12">
          <div class="scoll-pane mt-4" id="container">
              <ul class="photos">
                  <li>
                      <img src="https://robohash.org/test">
                  </li>
                  <li>
                      <img src="https://robohash.org/test">
                  </li>
                  <li>
                      <img src="https://robohash.org/test">
                  </li>
                  <li>
                      <img src="https://robohash.org/test">
                  </li>
              </ul>
          </div>
      </div>
  </div>
 </div>
<button id="slideBack" type="button">Prev</button>
<button id="slide" type="button">Next</button>
 
 
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">