There is movement of the carousel content on both left and right sides when the left mouse / mouse button is pressed.
But?
The error is that moves the object by selecting everything, the idea of moving the object is to move both sides but continue circularly without causing this error as you can see in the image:
The second error is that the movement of the carousel to move to the top of the left the carousel is executed only in that part does not return to the width normally is to say that it is as if it were locked or narrowed only moves in that space.
The wished thing is to move the carousel when having pressed the left button mouse / mouse but circularly continuously:
Example this carousel found at the bottom of the page Digital Media if you can see the content moves to both left and right sides by pressing the left mouse button / mouse the carousel moves continuously and does not leave space as the image of the error of this carousel.
var direccion = "up";
var pasoActual = 0;
var scrollUsuario = false;
var scroll0 = -1;
$(function(){
// vars for clients list carousel
var $clientcarousel = $('#clients-list');
var clients = $clientcarousel.children().length;
var clientwidth = (clients * 140); // 140px width for each client item
$clientcarousel.css('width',clientwidth);
var rotating = true;
var clientspeed = 1800;
var seeclients = setInterval(rotateClients, clientspeed);
$(document).on({
mouseenter: function(){
rotating = false; // turn off rotation when hovering
},
mouseleave: function(){
rotating = true;
}
}, '#clients');
function rotateClients() {
if(rotating != false) {
if (direccion == "up") {
rotateClientsUp();
if (++pasoActual == $("#clients-list li").length) direccion = "down";
} else {
rotateClientsDown();
if (--pasoActual == 0) direccion = "up";
}
}
}
function rotateClientsUp() {
var $last = $('#clients-list li:last');
$last.remove().css("margin-left", "-140px");
$("#clients-list").prepend($last);
$last.animate({ 'margin-left': '0' }, 600);
}
function rotateClientsDown() {
var $first = $('#clients-list li:first');
$first.animate({ 'margin-left': '-140px' }, 600, function() {
$first.remove().css({ 'margin-left': '0px' });
$('#clients-list li:last').after($first);
});
}
$clientcarousel.on("mousedown", function(e) {
scrollUsuario = true;
scroll0 = e.pageX;
event.preventDefault();
}).on("mouseup", function(e) {
scrollUsuario = false;
var num = Math.floor(Math.abs(scroll0 - e.pageX) / 140);
var dir = scroll0 - e.pageX < 0 ? "up" : "down";
for (var x = 0; x < num; x++) {
var $first = $('#clients-list li:first');
var $last = $('#clients-list li:last');
if (dir == "up") {
$last.prependTo("#clients-list");
} else {
$first.appendTo("#clients-list");
}
}
$("#clients-list").css("transform", "translate(0, 0)")
}).on("mousemove", function(e) {
if (scrollUsuario) {
$("#clients-list").css("transform", "translate(" + ( e.pageX - scroll0 ) +"px, 0)")
}
});
});#clients {
margin: 0 auto;
padding: 60px 0;
background: #f9f9f9;
}
#clients .clients-wrap {
width: 100%;
max-width: 1170px;
margin-left: auto;
display: block;
padding-bottom: 45px;
overflow: hidden;
}
#clients .clients-wrap ul {
display: block;
list-style: none;
position: relative;
}
#clients .clients-wrap ul li {
display: block;
float: left;
position: relative;
width: 140px;
height: 55px;
line-height: 55px;
text-align: center;
}
#clients .clients-wrap ul li img {
vertical-align: middle;
max-width: 100%;
max-height: 100%;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
transition: all 0.3s linear;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
filter: alpha(opacity=65);
opacity: 0.65;
}
#clients .clients-wrap ul li img:hover {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1.0;
}
#clients, #clients * {
user-select:none;
-webkit-user-select:none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clients">
<div class="clients-wrap">
<ul id="clients-list" class="clearfix">
<li><img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-1.png" alt="Cartoon Network"></li>
<li><img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-2.png" alt="Rough Draft Studios"></li>
<li><img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-3.png" alt="SpongeBob Movie #2"></li>
<li><img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-4.png" alt="Apple Computers"></li>
<li><img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-5.png" alt="Google chat talk"></li>
<li><img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-6.png" alt="G4TV channel"></li>
<li><img src="http://wp1.themexlab.com/html/digital-media/img/resources/c-3.png" alt="Wonka Chocolates and Candy"></li>
</ul>
</div><!-- @end .clients-wrap -->
</div><!-- @end #clients -->