2

Existe el movimiento del contenido del carousel de ambos lados izquierda y derecha al tener presionado el botón izquierdo ratón/mouse.

¿Pero?

El error esta que mueve el objecto seleccionándolo todo, la idea de mover el objecto es mover ambos lados pero que continué circularmente sin causar este error como se puede observar en la imagen:

introducir la descripción de la imagen aquí

El segundo error es que el movimiento del carousel al mover hasta el tope de la izquierda el carousel se ejecuta solo en esa parte no vuelve al ancho normalmente es decir es como si se trancara o se achicara solo se mueve en ese espacio.

Lo deseado es mover el carousel al tener presionado el botón izquierdo ratón/mouse pero circularmente continuamente:

Ejemplo este carousel que se encuentra al final de la pagina Digital Media si se puede observar se mueve el contenido a ambos lados izquierda y derecha al tener presionado el botón izquierdo del ratón/mouse el carousel se mueve circularmente continuamente y no deja espacio como la imagen del error de este 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 -->

2
  • Si este código lo copiaste de otra respuesta, deberías reconocer al autor cuando lo uses o lo publiques.
    – Mariano
    el 7 oct. 2016 a las 17:02
  • Hola @Mariano :) En realidad plantee una pregunta con un código ya desarrollado se añadieron nuevas características sí, es necesario lo que me indicas amigo.
    – May
    el 8 oct. 2016 a las 1:38

1 respuesta 1

5

NOTA: Yo hice ese código como respuesta a esta otra pregunta pero, por falta de espacio en la respuesta original (lo máximo que se puede poner es 30.000 caracteres y llegué a ese límite), la solución tenía algunas limitaciones/bugs. Como vas a poder ver abajo, la respuesta es bastante sencilla y podrías haber llegado a ella en poco tiempo si hubieras estudiado el código un poco.

La solución es simple: copia la lógica encargada de mover los logos, del mouseup al mousemove. Ya está, no hay mucho más misterio.

Ahora, en lugar de calcular cuántos logos se tienen que mover a derecha o izquierda cuando se suelte el ratón, lo que se hace es que directamente en el mousemove se realiza esa operación (que debería ocurrir de uno en uno).

El código:

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;
    $("#clients-list").css("transform", "translate(0, 0)")
  }).on("mousemove", function(e) {
    if (scrollUsuario) {
      $("#clients-list").css("transform", "translate(" + ( e.pageX - scroll0 ) +"px, 0)")

      var num = Math.floor(Math.abs(scroll0 - e.pageX) / 140);
      if (num != 0) {
        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)");
        scroll0 = e.pageX;
      }
    }
  });
});
#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 -->

1
  • 1
    Te amo ;) eres genial, sí discúlpame amigo si trabaje en el código pero en el jQuery me mareé, pase a optimizar los estilos css en crearlo design responsive lo he conseguido pero en el jQuery no tuve mucho éxito te prometo que estoy estudiando en https://developer.mozilla.org/es/ aprendiendo a manejar de a poco jQuery :)
    – May
    el 7 oct. 2016 a las 16:50

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.