JSFiddle - React, Tailwind, and code Playground

by n1ck

HTML

<div id="scrollLeft">Left</div>
<div id="scrollRight">Right</div>
<div id="scrollContent"></div>

CSS

#scrollRight{
 width:100px;
height:100px;
 background-color:red;    
}

#scrollLeft{
width:100px;
 height:100px;
background-color:blue;    
    
}

#scrollContent{
    background:green;
    height:200px;
    width:200px;
}

JavaScript

$("#scrollLeft").click(function(){
      $("#scrollContent").animate(
        {'margin-left':'-714px',
        queue:false, duration:500},
        function(){
            alert("finishedLeft");
      });
  });
  $("#scrollRight").click(function(){
      $("#scrollContent").animate(
        {'margin-left':'-1190px',
        queue:false, duration:500},
        function(){
            alert("finishedRight");
      });
  });