JSFiddle - React, Tailwind, and code Playground

HTML

<div class="leftButton">&nbsp;</div>
<div id="list">
<ul>
    <li><a target="_blank" href="http://www.linked2success.co.uk"><img alt="Linked 2 Success Preview" src="http://appware.co.uk/UserFiles/95/Image/portfolio-linked-2-success.jpg" /></a></li>
    <li><a target="_blank" href="http://www.4x4app.co.uk"><img alt="4x4 App Preview" src="http://appware.co.uk/UserFiles/95/Image/portfolio-4x4-app.jpg" /></a></li>
    <li><a target="_blank" href="http://www.ashbydentalpractice.co.uk"><img alt="Ashby Dental Practice Preview" src="http://appware.co.uk/UserFiles/95/Image/portfolio-ashby-dental.jpg" /></a></li>
    <li><a target="_blank" href="http://www.dementialife.com"><img alt="Dementia Life Preview" src="http://appware.co.uk/UserFiles/95/Image/portfolio-dementia-life.jpg" /></a></li>
</ul>
</div>
<div class="rightButton">&nbsp;</div>

CSS

.leftButton{

    float:left;

    width:22px;

    height:216px;

    background:url(http://appware.co.uk/UserFiles/95/Image/portfolio-left-btn.png) no-repeat;

}



.leftButton:hover{

    float:left;

    width:22px;

    height:216px;

    background:url(http://appware.co.uk/UserFiles/95/Image/portfolio-left-btn-hover.png) no-repeat;

cursor:pointer;

}



#list{

    width:486px;

    display:block;

    float:left;

    background: transparent;

    margin:0px;

    padding:0px;

    list-type:none;

}

#list li{

    float:left;

    width:486px;

    height:216px;

        background:none;

    padding:0;

    margin:0;

}



.rightButton{

    float:left;

    width:22px;

    height:216px;

    background:url(http://appware.co.uk/UserFiles/95/Image/portfolio-right-btn.png) no-repeat;

}





.rightButton:hover{

    float:left;

    width:22px;

    height:216px;

    background:url(http://appware.co.uk/UserFiles/95/Image/portfolio-right-btn-hover.png) no-repeat;

cursor:pointer;

}

JavaScript

jQuery.fn.carousel = function(op){
    // merge the options over-top of the defaults
    op = $.extend({
        left_btn:'',
        right_btn:'',
        list:'',
        width:'0px',
        _elements:[],
        _current:0,
        _locked:false
    }, op);
            
    // save all the li elements to a variable for access later
    $("li", op.list).each(function(){
        $(this).css({position:'relative'});
        op._elements[op._elements.length] = $(this);
    });
    
    // set the list to hide overflowing data
    $(op.list).css({overflow:"hidden"});
    
    // empty the list and set the new ul
    $(op.list).html("<ul id=\"carru\" style=\"width:999999px;display:block;height:inherit;padding:0;margin:0;\"></ul>");
    
    // add the first element to the live view
    $("#carru", op.list).append($(op._elements[0]));
}
    
$(document).ready(function(){
    $().carousel({left_btn:$(".leftButton"), right_btn:$('.rightButton'), list:$("#list"), width:"486px"});

});