hgow to hide scroll bar and add buttons in javascript

1/* Hide scrollbar for Chrome, Safari and Opera */
2.example::-webkit-scrollbar {
3  display: none;
4}
5
6/* Hide scrollbar for IE and Edge */
7.example {
8  -ms-overflow-style: none;
9}

1html {
2    scrollbar-width: none; /* For Firefox */
3    -ms-overflow-style: none; /* For Internet Explorer and Edge */
4}
5
6html::-webkit-scrollbar {
7    width: 0px; /* For Chrome, Safari, and Opera */
8}

1.scoll-pane {
2    width: 100%;
3    height: auto;
4    overflow: auto;
5    outline: none;
6    overflow-y: hidden;
7    padding-bottom: 15px;
8    -ms-overflow-style: scroll;  // IE 10+
9    scrollbar-width: none;  // Firefox
10}
11
12ul {
13    display: flex;
14    list-style-type: none;
15    padding: 0;
16    margin: 0;
17}
18
19img {
20    width: 300px;
21    height: 180px;
22}
23
24  .scoll-pane::-webkit-scrollbar { 
25  display: none;  // Safari and Chrome
26  }

1var button = document.getElementById('slide');
2button.onclick = function () {
3    var container = document.getElementById('container');
4    sideScroll(container,'right',25,100,10);
5};
6
7var back = document.getElementById('slideBack');
8back.onclick = function () {
9    var container = document.getElementById('container');
10    sideScroll(container,'left',25,100,10);
11};
12
13function sideScroll(element,direction,speed,distance,step){
14    scrollAmount = 0;
15    var slideTimer = setInterval(function(){
16        if(direction == 'left'){
17            element.scrollLeft -= step;
18        } else {
19            element.scrollLeft += step;
20        }
21        scrollAmount += step;
22        if(scrollAmount >= distance){
23            window.clearInterval(slideTimer);
24        }
25    }, speed);
26}

1<div class="container">
2  <div class="row">
3      <div class="col-12">
4          <div class="scoll-pane mt-4" id="container">
5              <ul class="photos">
6                  <li>
7                      <img src="https://robohash.org/test">
8                  </li>
9                  <li>
10                      <img src="https://robohash.org/test">
11                  </li>
12                  <li>
13                      <img src="https://robohash.org/test">
14                  </li>
15                  <li>
16                      <img src="https://robohash.org/test">
17                  </li>
18              </ul>
19          </div>
20      </div>
21  </div>
22 </div>
23<button id="slideBack" type="button">Prev</button>
24<button id="slide" type="button">Next</button>
25 
26 
27 <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">