insaidd,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.slider li{
margin: 0px;
width: 100px; height:50px; float: left;
display: block;
}
.slider .carusel {
position:relative; top: 0px; left:0px; display:block;
height:50px;
padding: 0px; margin: 0px;
}
.slider{
overflow:hidden; width: 200px; height:50px; position: relative; margin: 100px auto;
}
.prev, .next{
position: absolute;
width: 20px;
height: 20px;
background-color: #DCDCDC;
top: 10px;
left: 0;
border-radius: 50%;
opacity: .3;
cursor: pointer;
}
.next{
left: 180px;
}
.slider:hover .prev,.slider:hover .next{
opacity: 1;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var ul = $(".carusel"),
widthAll = 0,
loop = true,
pause = 2000,
spide = 1200,
next = false;
$("li", ul).each(function(indx, element) {
widthAll += this.offsetWidth
});
ul.width(widthAll);
function go() {
var li = next ? $("li:last", ul) : $("li:first", ul),
w = li.width();
next && (ul.prepend(li).css({
left: -w
}), w = 0);
ul.delay(pause).animate({
left: -w
}, spide, function() {
!next && ul.append(li).css({
left: 0
});
loop && go()
})
}
go();
$(".slider").on("mouseenter", function() {
loop = false;
ul.stop()
}).on("mouseleave", function() {
ul.stop();
loop = true;
pause = 2000;
spide = 1200;
go()
}).on("click", ".prev, .next", function() {
pause = 0;
spide = 800;
next = $(this).is(".next");
go()
})
});
</script>
</head>
<body>
<div class="slider">
<ul class="carusel">
<li id = "1" style="background-color:red;">1</li>
<li id = "2" style="background-color:green;width: 120px;">2</li>
<li id = "3" style="background-color:Yellow;width: 70px; ">3</li>
<li id = "4" style="background-color:DeepPink;">4</li>
<li id = "5" style="background-color:MediumBlue;">5</li>
</ul>
<div class="prev"><</div>
<div class="next">></div>
</div>
</body>
</html>