title: Hide scrollbar and add arrows instead
body: <p>I have a "div" with some images and there is a scrollbar at the bottom.
  What I would like to do is adding arrows to scroll and make the scrollbar invisible</p>
  
  <p>So far I have tried some of my methods but it did not work.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.scoll-pane {
      width: 100%;
      height: auto;
      overflow: auto;
      outline: none;
      overflow-y: hidden;
      padding-bottom: 15px;
  }
  
  ul {
      display: flex;
      list-style-type: none;
      padding: 0;
      margin: 0;
  }
  
  img {
      width: 300px;
      height: 180px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="row"&gt;
        &lt;div class="col-12"&gt;
            &lt;div class="scoll-pane mt-4"&gt;
                &lt;ul class="photos"&gt;
                    &lt;li&gt;
                        &lt;img src="https://robohash.org/test"&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;img src="https://robohash.org/test"&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;img src="https://robohash.org/test"&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;img src="https://robohash.org/test"&gt;
                    &lt;/li&gt;
                &lt;/ul&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;
   
   
   &lt;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"&gt;</code></pre>
  </div>
  </div>
  </p>