how to remove bottom scrollbar in css code example

Example 1: hgow to hide scroll bar and add buttons in javascript

.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
  }

Example 2: hgow to hide scroll bar and add buttons in javascript

<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">