JSFiddle - React, Tailwind, and code Playground

by brightonmike

HTML

<p><button id="right">Run »</button></p>
<p><button id="left">Run »</button></p>

<div class="block">a</div> <div class="block">b</div>
<div class="block">c</div> <div class="block">d</div>
<div class="block">e</div> <div class="block">f</div>

CSS

div {
   position: relative;
   background-color: #abc;
   width: 40px;
   height: 40px;
   float: left;
   margin: 5px;
}

.container {
     width:40px;
  overflow:hidden;  
}

JavaScript

$( "#right" ).click(function(){
  $( ".block:first" ).animate({
    left: "+=40"
  }, {
    duration: 1000,
    step: function( now, fx ){
      $( ".block:gt(0)" ).css( "left", now );
    }
  });
});


$( "#left" ).click(function(){
  $( ".block:first" ).animate({
    right: "+=40"
  }, {
    duration: 1000,
    step: function( now, fx ){
      $( ".block:gt(0)" ).css( "right", now );
    }
  });
});