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