Scroll Div by Click

by anoopsuda

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<div class="cardsliderblock">
<div class="sliderBlock" id="Slidercontent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</div>
<span class="btns horizon-prev" id="left-button"><</span>
<span class="btns horizon-next" id="right-button" >></span>
</div>

CSS

.sliderBlock {
  display: flex;
  height: 200px;
  border: solid 1px red;
  width: 800px;
  overflow: hidden;
  overflow-x: auto;

  transition: 2s all ease;
}

.sliderBlock>div {
  width: calc(100% / 5.5);
  margin-right: 2.2%;
  border: solid 1px black;
  min-width: 143px;
}

 

.btns {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: red;
}

JavaScript

const rightBtn = document.querySelector('#right-button');
const leftBtn = document.querySelector('#left-button');

rightBtn.addEventListener("click", function(event) {
  const conent = document.querySelector('#Slidercontent');
  // Change 1
  conent.scrollTo({
    top: 0,
    left: conent.scrollLeft + 160,
    behavior: "smooth",
  });

  event.preventDefault();
});

leftBtn.addEventListener("click", function(event) {
  const conent = document.querySelector('#Slidercontent');
  // Change 2
  conent.scrollTo({
    top: 0,
    left: conent.scrollLeft - 160,
    behavior: "smooth",
  });

  event.preventDefault();
});