smart-create,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
$(function() {
var a = p = 50,
b = $(window).width() - p - $(".slider").width();
$(".scroll-bar").slider({
max: p,
min: b,
value: b,
slide: function(k, d) {
a = b - d.value + p;
$(".slider").css({
left: a
})
}
});
$(window).on("mousewheel DOMMouseScroll", function(c) {
c.preventDefault();
a += c.originalEvent.wheelDelta || 40 * -c.originalEvent.detail;
a > p && (a = p);
a < b && (a = b);
$("p").html(b - a);
$(".scroll-bar").slider("option", "value", b - a + p);
$(".slider").stop().animate({
left: a
}, 600)
}).on("resize", function() {
a = p;
b = $(window).width() - p - $(".slider").stop().animate({
left: a
},
600).width();
$(".scroll-bar").slider("option", "min", b);
$(".scroll-bar").slider("option", "value", b)
})
});
</script>
<style type="text/css">html,body{
height:100%;
}
body{
overflow:hidden;
position:relative;
}
.slider{
left:50px;
position:absolute;
height:200px;
width:2990px;
background-color:hsla(51,100%,50%,1);
}
.slider img{
height:200px;
padding:0;
}
.scroll-bar{
position:absolute;
left:0;
top:calc(100vh - 16px);
width:calc(100vw - 60px);
}
.ui-slider-horizontal{
height:0px;
}
.ui-slider-horizontal .ui-slider-handle{
top:-4px;
background:#0000FF;
width:56px;
border-radius:8px;
height:8px;
}
:focus{
outline:0;
border:0;
}
</style>
</head>
<body>
<div class="slider">
<img src="http://static.panoramio.com/photos/large/45836660.jpg" alt="">
<img src="http://static.panoramio.com/photos/large/45836660.jpg" alt="">
<img src="http://static.panoramio.com/photos/large/45836660.jpg" alt="">
<img src="http://static.panoramio.com/photos/large/45836660.jpg" alt="">
<img src="http://static.panoramio.com/photos/large/45836660.jpg" alt="">
<img src="http://static.panoramio.com/photos/large/45836660.jpg" alt="">
<img src="http://static.panoramio.com/photos/large/45836660.jpg" alt="">
<img src="http://static.panoramio.com/photos/large/45836660.jpg" alt="">
<img src="http://static.panoramio.com/photos/large/45836660.jpg" alt="">
<img src="http://static.panoramio.com/photos/large/45836660.jpg" alt="">
<img src="http://static.panoramio.com/photos/large/45836660.jpg" alt="">
</div>
<div class="scroll-bar"></div>
</body>
</html>