Lemmon Slider

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="lemmon-slider.js"></script>

.wrap { 
	width:100%; 
}
div.slider    {
	overflow:hidden; 
	position:relative; 
	width:100%; 
	height:160px !important; 
}
div.slider ul {
	margin:0;
	padding:0; 
	height:160px;
}
div.slider li {
	float:left;
	list-style:none;
	margin:0 5px 0 0;
	text-align:center;
	line-height:160px;
	font-size:25px;
}
div.slider li div{
	height: 160px;
}

<div class="wrap">
    <div id="slider" class="slider">
        <ul>
            <li><div style="width:200px"> 1</div></li>
            <li><div style="width:250px"> 2</div></li>
            <li><div style="width:100px"> 3</div></li>
            <li><div style="width:170px"> 4</div></li>
            <li><div style="width:300px"> 5</div></li>
            <li><div style="width:200px"> 6</div></li>
            <li><div style="width:250px"> 7</div></li>
            <li><div style="width:100px"> 8</div></li>
            <li><div style="width:200px"> 9</div></li>
            <li><div style="width:250px">10</div></li>
            <li><div style="width:100px">11</div></li>
            <li><div style="width:170px">12</div></li>
            <li><div style="width:300px">13</div></li>
            <li><div style="width:200px">14</div></li>
            <li><div style="width:250px">15</div></li>
            <li><div style="width:100px">16</div></li>
        </ul>
    </div>

    <div class="controls">
        <a href="#" class="prev-page">Prev Page</a> |
        <a href="#" class="prev-slide">Prev Slide</a> |
        <a href="#" class="next-slide">Next Slide</a> |
        <a href="#" class="next-page">Next Page</a>
    </div>
</div>

 $(document).ready(function () {
        $('#slider').lemmonSlider({
            infinite: true
        });
});