There is movement of the carousel content on both the left and right sides by holding down the left mouse button.
But?
The error is that it moves the object selecting everything, the idea of moving the object is to move both sides but continue circularly without causing this error as can be seen in the image:
The second error is that the movement of the carousel when moving to the top of the left, the carousel is executed only in that part, it does not return to the width normally, that is, it is as if it were locked or made smaller, it only moves in that space.
The desired thing is to move the carousel by having the left mouse button pressed but circularly continuously:
Example this carousel that is at the bottom of the Digital Media page if you can see the content moves to both left and right sides when you have the left mouse button pressed, the carousel moves circularly continuously and leaves no space like 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 -->
The solution is simple: copy the logic in charge of moving the logos, from
mouseuptomousemove. That's it, there's not much more mystery.Now, instead of calculating how many logos have to be moved to the right or left when the mouse is released, what is done is that
mousemovethis operation is performed directly on it (which should happen one by one).The code: