JSFiddle - React, Tailwind, and code Playground

by web designer

HTML

<div>
    <div id="rightScroll"></div>
<div id="wn" class="wn">
<div id="lyr1" class="lyr1"> 
<ul id="horiz">
<li  style='padding-left:5px; padding-right:5px; padding-top:2px; padding-bottom:2px;'>                      <asp:Button ID="btn1" Text="click" runat="server"/>  </li>

<li style='padding-left:5px; padding-right:5px; padding-top:2px; padding-bottom:2px;'>         <asp:Image ID="this" ImageUrl="~\img\ajax-loader1.gif" Width="100" Height="100"  runat="server" /></li>
 <li style='padding-left:5px; padding-right:5px; padding-top:2px; padding-bottom:2px;'>     <asp:Image ID="Image1" ImageUrl="~\img\banner.jpg" Width="100" Height="100" runat="server"   /></li>
 <li  style='padding-left:5px; padding-right:5px; padding-top:2px; padding-  bottom:2px;'>   <asp:Image ID="Image2" ImageUrl="~\img\blackBoard.jpg" Width="100"    Height="100" runat="server" /></li>
 <li  style='padding-left:5px; padding-right:5px; padding-top:2px; padding- bottom:2px;'>   <asp:Image ID="Image3" ImageUrl="~\img\ajax-loader1.gif" Width="100"   Height="100" runat="server" /></li>
</ul>
</div>
</div>
<div id="leftScroll"></div>
</div>

CSS

.wn
{
position: relative; /* scroll area div must be positioned */
width: 670px;
height: 120px; /* width and height required. adjust to suit  */
overflow: hidden; /* required! */
}

.lyr1
{
position: absolute;
left: 50px;
width: 90px;
height: 90px;
margin: 5px;
}
#leftScroll,
#rightScroll{
    background-color:red;
    position:relative;
    border-radius:5px;
    width:100px;
    height:50px;
}

JavaScript

$("#rightScroll").click(function () {
      $(".lyr1").animate({ "left": "+=150px" }, "slow");
});

$("#leftScroll").click(function () {
    $(".lyr1").animate({ "left": "-=150px" }, "slow");
});