removing scroll css code example

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

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);
}

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

Tags:

Html Example