JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.gmarwaha.com/jquery/jcarousellite/js/jcarousellite_1.0.1.min.js"></script>
<div id="slider1">	<a class="buttons prev" href="#">left</a>

    <div class="viewport">
        <ul class="overview">
            <li>
                <img src="http://tinyurl.com/pewde8e" />
            </li>
            <li>
                <img src="http://tinyurl.com/pewde8e" />
            </li>
            <li>
                <img src="http://tinyurl.com/pewde8e" />
            </li>
            <li>
                <img src="http://tinyurl.com/pewde8e" />
            </li>
            <li>
                <img src="http://tinyurl.com/pewde8e" />
            </li>
        </ul>
    </div>	<a class="buttons next" href="#">right</a>

</div>

CSS

#slider1 {
    height: 480px;
    overflow:hidden;
    width: 720px;
    background: red;
    margin:auto;
}
#slider1 .viewport {
    width: 680px;
    height: 480px;
    overflow: hidden;
    position: relative;
    background: blue;
}
#slider1 .buttons {
    background:url("../images/buttons.png") no-repeat scroll 0 0 transparent;
    display: block;
    margin: 30px 10px 0 0;
}
#slider1 .next {
    margin: 30px 0 0 10px;
}
#slider1 .disable {
    visibility: hidden;
}
#slider1 .overview {
    list-style: none;
    position: absolute;
    padding: 0;
    margin: 0;
    left: 0;
    top: 0;
    width: 600px;
}
#slider1 .overview li {
    float: left;
    margin: 0 20px 0 0;
    padding: 1px;
    height: 390px;
    border: 1px solid #dcdcdc;
    width: 290px;
}

JavaScript

$(document).ready(function () {
    $('#slider1').jCarouselLite({
        btnNext: ".next",
        btnPrev: ".prev",
        circular: "true",
        visible: "2"
    });
});