JSFiddle - React, Tailwind, and code Playground

by pphheerroonn

HTML

<div id="scroll-conatiner" class="horizontal-scroller">
      <div id="scroll-content" class="product-scroller">Click the buttons to slide horizontally!</div>
    </div>
    <button id="slideLeft" type="button">Slide left</button>
    <button id="slideRight" type="button">Slide right</button>

CSS

#scroll-conatiner {
      width: 145px;
      height: 100px;
      border: 1px solid #ccc;
      overflow-x: scroll;
    }

    #scroll-content {
      width: 250px;
      background-color: #ccc;
    }

JavaScript

const buttonRight = document.getElementById('slideRight');
    const buttonLeft = document.getElementById('slideLeft');

    buttonRight.onclick = function () {
      document.getElementById('scroll-conatiner').scrollLeft += 20;
    };
    buttonLeft.onclick = function () {
      document.getElementById('scroll-conatiner').scrollLeft -= 20;
    };