JSFiddle - React, Tailwind, and code Playground

by alex_ball

HTML

<div style="width:1050px">
    <div style="float:left;">
        <a class="abc" href="javascript: void(0);"  style="display:table-cell;height:155px;vertical-align:middle">PREV</a>
    </div>

        <div style="width:1220px;float:left">
            <ul class="images" id="scroller">
                <li class="list"><img src="http://placehold.it/350&text=TEST1" class="image" alt="anuj"  width="200"/></li>
                <li class="list"><img src="http://placehold.it/350&text=TEST2" class="image" alt="anuj"  width="200"/></li>
                <li class="list"><img src="http://placehold.it/350&text=TEST3" class="image" alt="anuj"  width="200"/></li>
                <li class="list"><img src="http://placehold.it/350&text=TEST4" class="image" alt="anuj"  width="200"/></li>     
            </ul>
        </div>

    <div style="float:left;">
        <a class="def" href="javascript: void(0);"  style="display:table-cell;height:155px;vertical-align:middle;">NEXT</a>
    </div>
</div>

CSS

ul.images {
  padding:0px;
  margin:0px;
  white-space: nowrap;
  width:auto;
  overflow:hidden;
}

ul.images li 
{
  line-height:200px;
  display: inline;

}

JavaScript

$("a.abc").click(function() {
            $(".images").each(function(){
                $(this).animate({"margin-left":"-=204px"},800)
            
            });
            
        });
        $("a.def").click(function() {
            $(".images").each(function(){
            
                $(this).animate({"margin-left":"+=204px"},800)
            
            });
            
        });