Carousel - ¿Cómo evitar la selección de imagen y crear un moviento automático de izquierda y derecha y aplicar un scroll horizontal?

21

4

En StackOverflow Encontré varías preguntas sobre carousel entre otros temas basándose a mi pregunta.

Preguntas muy útil como guía:

Ahora mi pregunta es:

¿Cómo crear un movimiento automático de izquierda y derecha?

Me explico hacer que el movimiento de las imágenes se mueva hacía la izquierda tomando en cuenta el inició de la partida en este caso sería la imagen 1 hasta la imagen 6 y retroceder/devolver el movimiento hacia la derecha de la imagen 6 a la imagen principal así sucesivamente.

¿Cómo crear un scroll horizontal en las imágenes o el contenido de las imágenes?

Es decir poder mover las imágenes o el contenido tanto a la derecha cómo la izquierda con este efecto al intentar seleccionar la imagen lo único que se podrá conseguir es mover el contenido del carousel.

  • Ejemplo: los efectos de este carousel de clientes que se encuentra al final de la pagina de este sitio web Digital Media.

En el carousel de testimonio de los clientes como hacer el movimiento automático en los testimonios de los clientes.


Me podrían explicar cómo lograr aplicar estos efectos.

$(function(){
  // vars for testimonials carousel
  var $txtcarousel = $('#testimonial-list');
  var txtcount = $txtcarousel.children().length;
  var wrapwidth = (txtcount * 415) + 415; // 400px width for each testimonial item
  $txtcarousel.css('width',wrapwidth);
  var animtime = 750; // milliseconds for clients carousel
 
  // prev & next btns for testimonials
  $('#prv-testimonial').on('click', function(){
var $last = $('#testimonial-list li:last');
$last.remove().css({ 'margin-left': '-415px' });
$('#testimonial-list li:first').before($last);
$last.animate({ 'margin-left': '0px' }, animtime); 
  });
  
  $('#nxt-testimonial').on('click', function(){
var $first = $('#testimonial-list li:first');
$first.animate({ 'margin-left': '-415px' }, animtime, function() {
  $first.remove().css({ 'margin-left': '0px' });
  $('#testimonial-list li:last').after($first);
});  
  });


  // 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) {
  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);
  });
}
  }
});
/** page structure **/
#w {
  display: block;
  width: 750px;
  margin: 0 auto;
  padding-top: 30px;
  padding-bottom: 45px;
}

#content {
  display: block;
  width: 100%;
  background: #fff;
  padding: 25px 20px;
  padding-bottom: 35px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
}


/** testimonials **/
#testimonials {
  display: block;
  width: 100%;
  margin-bottom: 40px;
}
#testimonials h2 {
  display: block;
  text-align: center;
  font-weight: bold;
  margin-bottom: 3px;
}

#testimonials .carousel-wrap {
  display: block;
  width: 400px;
  margin: 0 auto;
  overflow: hidden;
}

#testimonials .carousel-nav {
  display: block;
  width: 300px;
  margin: 0 auto;
}
#testimonials .carousel-nav img {
  cursor: pointer;
}
#testimonials .carousel-nav img:active {
  position: relative;
  top: 1px;
}
#testimonials .carousel-nav .nextbtn {
  float: right;
}

#testimonials .carousel-wrap ul {
  display: block;
  list-style: none;
  position: relative;
}
#testimonials .carousel-wrap ul li {
  display: block;
  float: left;
  position: relative;
  width: 400px;
  margin-right: 15px;
}

#testimonials .carousel-wrap .context {
  font-size: 2.0em;
  line-height: 1.45em;
  color: #797670;
  font-style: italic;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid #dcdcdc;
}


/** client logos **/
#clients {
  display: block;
  margin-bottom: 15px;
}

#clients .clients-wrap {
  display: block;
  width: 700px;
  margin: 0 auto;
  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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <div id="w">
<div id="content">
  
  <div id="testimonials">
    <h2>Client Testimonials</h2>
    <div class="carousel-nav clearfix">
      <img src="http://icons.iconarchive.com/icons/iconsmind/outline/32/Arrow-Left-icon.png" id="prv-testimonial" class="prevbtn">
      <img src="http://icons.iconarchive.com/icons/iconsmind/outline/32/Arrow-Right-icon.png" id="nxt-testimonial" class="nextbtn">
    </div>
    <div class="carousel-wrap">
      <ul id="testimonial-list" class="clearfix">
        <li>
          <p class="context">"Their services are beyond anything I could have imagined. It gets my highest recommendation."</p>
          <p class="credits">Johnny Appleseed, <a href="http://www.apple.com/">Apple, Inc.</a></p>
        </li>
        <li>
          <p class="context">"Simple. Efficient. Quick production and easy to work with."</p>
          <p class="credits">Smithy Smith, <a href="http://www.roughdraftstudios.com/">Rough Draft Studios, Inc.</a></p>
        </li>
        <li>
          <p class="context">"The marketing strategy is superb. These guys came through above and beyond expectations."</p>
          <p class="credits">Mr. Generic, <a href="http://www.google.com/">Google</a></p>
        </li>
        <li>
          <p class="context">"We needed a reliable team to help with some finishing touches. These guys are reliable, fair, and trustworthy... A+ quality."</p>
          <p class="credits">Seth MacFarlane, <a href="http://en.wikipedia.org/wiki/Fuzzy_Door_Productions">Fuzzy Door Productions</a></p>
        </li>
      </ul><!-- @end #testimonial-list -->
    </div><!-- @end .carousel-wrap -->
  </div><!-- @end #testimonials -->
  
  <div id="clients">
    <h3>Past &amp; Present Clients</h3>
    <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 -->
</div><!-- @end #content -->
  </div><!-- @end #w -->

May

Posted 2016-09-29T08:37:57.173

Reputation: 138

Entonces, lo que quieres es 1) el carrusel de los testimonios sea automático; y 2) el carrusel de los logos se mueva de izquierda a derecha. Aparte, ¿te has fijado cómo lo hacen en la página que compartes? Su código es muy diferente a lo que tienes hasta ahoraAlvaro Montoro 2016-10-03T12:42:23.950

Answers

12

Vamos a hacerlo por partes.

Primero el carrusel de testimonios. Lo que quieres es que se anime automáticamente sin necesidad de que el usuario pulse en los botones. Esto lo puedes realizar de una manera muy sencilla: como ya tienes la acción del botón "anterior" y "siguiente", lo que puedes hacer es crear un intervalo que haga click en el botón siguiente cada X tiempo.

Eso se puede hacer con setInterval (para crear el intervalo) y el método click (sin parámetros) para lanzar el evento click de un elemento. Y sería algo como esto:

setInterval("$('#nxt-testimonial').click()", 2500);

Que lanza el evento click del botón siguiente cada 2.5 segundos. Ahora, si quieres hacerlo un poco más complicado, podrías hacer que no sea automático si la persona pone el ratón encima de los testimonios. Para eso el código sería algo como esto:

var testinterval = setInterval("$('#nxt-testimonial').click()", 2500);
$txtcarousel.on("mouseenter", function() {
    clearInterval(testinterval);
}).on("mouseleave", function() {
    var testinterval = setInterval("$('#nxt-testimonial').click()", 2500);
});

Y aquí lo puedes ver funcionando:

$(function(){
  // vars for testimonials carousel
  var $txtcarousel = $('#testimonial-list');
  var txtcount = $txtcarousel.children().length;
  var wrapwidth = (txtcount * 415) + 415; // 400px width for each testimonial item
  $txtcarousel.css('width',wrapwidth);
  var animtime = 750; // milliseconds for clients carousel

  // prev & next btns for testimonials
  $('#prv-testimonial').on('click', function(){
    var $last = $('#testimonial-list li:last');
    $last.remove().css({ 'margin-left': '-415px' });
    $('#testimonial-list li:first').before($last);
    $last.animate({ 'margin-left': '0px' }, animtime); 
  });

  $('#nxt-testimonial').on('click', function(){
    var $first = $('#testimonial-list li:first');
    $first.animate({ 'margin-left': '-415px' }, animtime, function() {
      $first.remove().css({ 'margin-left': '0px' });
      $('#testimonial-list li:last').after($first);
    });  
  });

  var testinterval = setInterval("$('#nxt-testimonial').click()", 2500);
  $txtcarousel.on("mouseenter", function() {
    clearInterval(testinterval);
  }).on("mouseleave", function() {
    var testinterval = setInterval("$('#nxt-testimonial').click()", 2500);
  });

});
/** page structure **/
#w {
  display: block;
  width: 750px;
  margin: 0 auto;
  padding-top: 30px;
  padding-bottom: 45px;
}

#content {
  display: block;
  width: 100%;
  background: #fff;
  padding: 25px 20px;
  padding-bottom: 35px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
}


/** testimonials **/
#testimonials {
  display: block;
  width: 100%;
  margin-bottom: 40px;
}
#testimonials h2 {
  display: block;
  text-align: center;
  font-weight: bold;
  margin-bottom: 3px;
}

#testimonials .carousel-wrap {
  display: block;
  width: 400px;
  margin: 0 auto;
  overflow: hidden;
}

#testimonials .carousel-nav {
  display: block;
  width: 300px;
  margin: 0 auto;
}
#testimonials .carousel-nav img {
  cursor: pointer;
}
#testimonials .carousel-nav img:active {
  position: relative;
  top: 1px;
}
#testimonials .carousel-nav .nextbtn {
  float: right;
}

#testimonials .carousel-wrap ul {
  display: block;
  list-style: none;
  position: relative;
}
#testimonials .carousel-wrap ul li {
  display: block;
  float: left;
  position: relative;
  width: 400px;
  margin-right: 15px;
}

#testimonials .carousel-wrap .context {
  font-size: 2.0em;
  line-height: 1.45em;
  color: #797670;
  font-style: italic;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid #dcdcdc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="w">
  <div id="content">

    <div id="testimonials">
      <h2>Client Testimonials</h2>
      <div class="carousel-nav clearfix">
        <img src="http://icons.iconarchive.com/icons/iconsmind/outline/32/Arrow-Left-icon.png" id="prv-testimonial" class="prevbtn">
        <img src="http://icons.iconarchive.com/icons/iconsmind/outline/32/Arrow-Right-icon.png" id="nxt-testimonial" class="nextbtn">
      </div>
      <div class="carousel-wrap">
        <ul id="testimonial-list" class="clearfix">
          <li>
            <p class="context">"Their services are beyond anything I could have imagined. It gets my highest recommendation."</p>
            <p class="credits">Johnny Appleseed, <a href="http://www.apple.com/">Apple, Inc.</a></p>
          </li>
          <li>
            <p class="context">"Simple. Efficient. Quick production and easy to work with."</p>
            <p class="credits">Smithy Smith, <a href="http://www.roughdraftstudios.com/">Rough Draft Studios, Inc.</a></p>
          </li>
          <li>
            <p class="context">"The marketing strategy is superb. These guys came through above and beyond expectations."</p>
            <p class="credits">Mr. Generic, <a href="http://www.google.com/">Google</a></p>
          </li>
          <li>
            <p class="context">"We needed a reliable team to help with some finishing touches. These guys are reliable, fair, and trustworthy... A+ quality."</p>
            <p class="credits">Seth MacFarlane, <a href="http://en.wikipedia.org/wiki/Fuzzy_Door_Productions">Fuzzy Door Productions</a></p>
          </li>
        </ul><!-- @end #testimonial-list -->
      </div><!-- @end .carousel-wrap -->
    </div><!-- @end #testimonials -->
  </div><!-- @end #content -->
</div><!-- @end #w --> 

Como sugiere Mitsu Gami en su comentario, podrías usar requestAnimationFrame en lugar de setInterval. Lo cual funcionaría mejor, aunque debes tener cuidado porque puede no funcionar en algunos navegadores, especialmente no sería compatible con versiones antiguas de Android o IE (9 e inferiores).

En ese caso, el código se vería así:

var start = null;
var testinterval = null;

function animTestimonials(timestamp) {
  if (!start)  start = timestamp;
  var progress = timestamp - start;
  if (progress > 2500) {
    start = timestamp;
    $('#nxt-testimonial').click();
  }
  testinterval = window.requestAnimationFrame(animTestimonials);
}

$(function(){
  // vars for testimonials carousel
  var $txtcarousel = $('#testimonial-list');
  var txtcount = $txtcarousel.children().length;
  var wrapwidth = (txtcount * 415) + 415; // 400px width for each testimonial item
  $txtcarousel.css('width',wrapwidth);
  var animtime = 750; // milliseconds for clients carousel

  // prev & next btns for testimonials
  $('#prv-testimonial').on('click', function(){
    var $last = $('#testimonial-list li:last');
    $last.remove().css({ 'margin-left': '-415px' });
    $('#testimonial-list li:first').before($last);
    $last.animate({ 'margin-left': '0px' }, animtime); 
  });

  $('#nxt-testimonial').on('click', function(){
    var $first = $('#testimonial-list li:first');
    $first.animate({ 'margin-left': '-415px' }, animtime, function() {
      $first.remove().css({ 'margin-left': '0px' });
      $('#testimonial-list li:last').after($first);
    });  
  });

  testinterval = window.requestAnimationFrame(animTestimonials);
  $txtcarousel.on("mouseenter", function() {
    window.cancelAnimationFrame(testinterval);
  }).on("mouseleave", function() {
    testinterval = window.requestAnimationFrame(animTestimonials);
  });

});
/** page structure **/
#w {
  display: block;
  width: 750px;
  margin: 0 auto;
  padding-top: 30px;
  padding-bottom: 45px;
}

#content {
  display: block;
  width: 100%;
  background: #fff;
  padding: 25px 20px;
  padding-bottom: 35px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
}


/** testimonials **/
#testimonials {
  display: block;
  width: 100%;
  margin-bottom: 40px;
}
#testimonials h2 {
  display: block;
  text-align: center;
  font-weight: bold;
  margin-bottom: 3px;
}

#testimonials .carousel-wrap {
  display: block;
  width: 400px;
  margin: 0 auto;
  overflow: hidden;
}

#testimonials .carousel-nav {
  display: block;
  width: 300px;
  margin: 0 auto;
}
#testimonials .carousel-nav img {
  cursor: pointer;
}
#testimonials .carousel-nav img:active {
  position: relative;
  top: 1px;
}
#testimonials .carousel-nav .nextbtn {
  float: right;
}

#testimonials .carousel-wrap ul {
  display: block;
  list-style: none;
  position: relative;
}
#testimonials .carousel-wrap ul li {
  display: block;
  float: left;
  position: relative;
  width: 400px;
  margin-right: 15px;
}

#testimonials .carousel-wrap .context {
  font-size: 2.0em;
  line-height: 1.45em;
  color: #797670;
  font-style: italic;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid #dcdcdc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="w">
  <div id="content">

    <div id="testimonials">
      <h2>Client Testimonials</h2>
      <div class="carousel-nav clearfix">
        <img src="http://icons.iconarchive.com/icons/iconsmind/outline/32/Arrow-Left-icon.png" id="prv-testimonial" class="prevbtn">
        <img src="http://icons.iconarchive.com/icons/iconsmind/outline/32/Arrow-Right-icon.png" id="nxt-testimonial" class="nextbtn">
      </div>
      <div class="carousel-wrap">
        <ul id="testimonial-list" class="clearfix">
          <li>
            <p class="context">"Their services are beyond anything I could have imagined. It gets my highest recommendation."</p>
            <p class="credits">Johnny Appleseed, <a href="http://www.apple.com/">Apple, Inc.</a></p>
          </li>
          <li>
            <p class="context">"Simple. Efficient. Quick production and easy to work with."</p>
            <p class="credits">Smithy Smith, <a href="http://www.roughdraftstudios.com/">Rough Draft Studios, Inc.</a></p>
          </li>
          <li>
            <p class="context">"The marketing strategy is superb. These guys came through above and beyond expectations."</p>
            <p class="credits">Mr. Generic, <a href="http://www.google.com/">Google</a></p>
          </li>
          <li>
            <p class="context">"We needed a reliable team to help with some finishing touches. These guys are reliable, fair, and trustworthy... A+ quality."</p>
            <p class="credits">Seth MacFarlane, <a href="http://en.wikipedia.org/wiki/Fuzzy_Door_Productions">Fuzzy Door Productions</a></p>
          </li>
        </ul><!-- @end #testimonial-list -->
      </div><!-- @end .carousel-wrap -->
    </div><!-- @end #testimonials -->
  </div><!-- @end #content -->
</div><!-- @end #w -->

Ahora el scroll de imágenes. Tal y como lo tienes hecho ahora mismo lo que hace tu scroll de imágenes hace es:

  1. Mover el primer elemento hacia la izquierda poniéndole un margen negativo
  2. Eliminar el primer elemento
  3. Añadirlo al final de la lista
  4. Saltar al paso 1 después de X segundos

Esto funciona bien si quieres hacer un movimiento de derecha a izquierda, pero para hacer algo similar de izquierda a derecha lo que podrías hacer es:

  1. Mover el último elemento al principio y ponerle margen negativo (sin animación)
  2. Animar el margen del primer elemento (antes último) para que sea 0
  3. Saltar al paso 1 después de X segundos

Me estoy basando en el código que ya tienes. Si te fijas en la página que enlazas en la pregunta, verás que lo hacen de una manera bastante diferente (duplican el contenido y lo mueven con CSS y translate), que puede ser más limpia e interesante.

Para ello sólo hace falta cambiar la función rotateClients que quedaría así:

function rotateClients() {
    if(rotating != false) {
        var $last   = $('#clients-list li:last');
        $last.remove().css("margin-left", "-140px");
        $("#clients-list").prepend($last);
        $last.animate({ 'margin-left': '0' }, 600);
    }
}

Aquí puedes ver el código funcionando:

$(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) {
      var $last   = $('#clients-list li:last');
      $last.remove().css("margin-left", "-140px");
      $("#clients-list").prepend($last);
      $last.animate({ 'margin-left': '0' }, 600);
    }
  }
});
/** page structure **/
#w {
  display: block;
  width: 750px;
  margin: 0 auto;
  padding-top: 30px;
  padding-bottom: 45px;
}

#content {
  display: block;
  width: 100%;
  background: #fff;
  padding: 25px 20px;
  padding-bottom: 35px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
}

/** client logos **/
#clients {
  display: block;
  margin-bottom: 15px;
}

#clients .clients-wrap {
  display: block;
  width: 700px;
  margin: 0 auto;
  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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="w">
  <div id="content">
    <div id="clients">
      <h3>Past &amp; Present Clients</h3>
      <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 -->
  </div><!-- @end #content -->
</div><!-- @end #w -->

Ahora que ya tienes el código para mover las imágenes hacia la derecha y hacia la izquierda, lo que podrías hacer es:

  1. Contar el número de elementos
  2. Inicializar una variable a 0
  3. Realizar la función que mueve los elementos hacia la izquierda
  4. Incrementar en 1 la variable iniciada en el paso 2
  5. Si la variable es menor que el número de elementos (aún no se recorrieron todas las imágenes), ir al paso 3
  6. Realizar la función que mueve los elementos hacia la derecha
  7. Disminuir en 1 la variable iniciada en el paso 2
  8. Si la variable es mayor que 0 (aún no se recorrieron todas las imágenes), ir al paso 6
  9. Ir al paso 3 (para empezar todo de nuevo)

El código podría ser algo así:

var direccion  = "up";
var pasoActual = 0;

$(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);
    });
  }
});
/** page structure **/
#w {
  display: block;
  width: 750px;
  margin: 0 auto;
  padding-top: 30px;
  padding-bottom: 45px;
}

#content {
  display: block;
  width: 100%;
  background: #fff;
  padding: 25px 20px;
  padding-bottom: 35px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
}

/** client logos **/
#clients {
  display: block;
  margin-bottom: 15px;
}

#clients .clients-wrap {
  display: block;
  width: 700px;
  margin: 0 auto;
  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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="w">
  <div id="content">
    <div id="clients">
      <h3>Past &amp; Present Clients</h3>
      <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 -->
  </div><!-- @end #content -->
</div><!-- @end #w -->

Sobre lo de arrastrar los elementos en el scroll, el método de la página enlazada es mucho mejor. He creado una animación simple que se basa en la posición del ratón cuando se pulsa y se suelta teniendo en cuenta que el ancho de cada elemento es 140.

Lo puedes ver aquí:

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)")
    }
  });
});
/** page structure **/
#w {
  display: block;
  width: 750px;
  margin: 0 auto;
  padding-top: 30px;
  padding-bottom: 45px;
}

#content {
  display: block;
  width: 100%;
  background: #fff;
  padding: 25px 20px;
  padding-bottom: 35px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
}

/** client logos **/
#clients {
  display: block;
  margin-bottom: 15px;
}

#clients .clients-wrap {
  display: block;
  width: 700px;
  margin: 0 auto;
  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="w">
  <div id="content">
    <div id="clients">
      <h3>Past &amp; Present Clients</h3>
      <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 -->
  </div><!-- @end #content -->
</div><!-- @end #w -->

Alvaro Montoro

Posted 2016-09-29T08:37:57.173

Reputation: 30 630

2Una mejor opción es usar requestAnimationFrame en lugar de setInterval.gugadev 2016-10-03T13:59:13.037

1@May añadí un ejemplo que primero mueve los elementos a la derecha y cuando termina pasa a moverlos a la derecha y así sucesivamente. Básicamente lo único que habría que hacer es poner juntos el código original y el sugeridoAlvaro Montoro 2016-10-03T19:51:53.290

4

A ver, corto... sacando solo de ese que te he puesto antes el código del carrusel con texto e imagen:

Esto es el html y el javascript

<!doctype html><html>  <head><meta charset="utf-8"><title>CITAS</title> 
<link rel="stylesheet" type="text/css" href="css/citas_slide.css" />

<script type="text/javascript" src="javascript/jquery-2.1.4.min.js" ></script>
<script type="text/javascript" src="javascript/galeria.js" ></script>
<script>
var t;

$(function (){
  galeria.forEach(function(elem,i) { 
    $("ul#selector").append("<li><a onClick='select("+i+")'></a></li>");
  });

  select(0);
});

function select(i){
  $("nav a")
    .removeClass("on off")
    .addClass(function(j){return(j===i)?"on":"off";});

  $("#persona").html(galeria[i].persona);
  $("#frase").html(galeria[i].frase);
  $("#foto").attr("src", galeria[i].foto);

  clearTimeout(t);
  t = setTimeout( function(){select((i + 1) % galeria.length);}, 2000);
}
</script>
</head>

<body>
<div class="contenido">
  <nav> 
    <ul id="selector"></ul>
  </nav>
  <section id="caja">
    <img id="foto" alt="" />
    <div class="textos">
      <p id="frase"></p>
      <p id="persona"></p>
    </div>
  </section>
</div>
</body>
</html>

y en este documento de javascript es donde cargas el texto y la url de la imagen que vas a mostrar, en tu caso sería el logotipo (creo)

var galeria = [
   { persona:"Buddha - बुद्धा",
     frase:"En la confrontación entre el arrollo y la roca, el arrollo siempre ganará, no por la fuerza, sino por la persistencia.",
     foto:"http://www.imagexia.com/img/Cara-de-Buda.jpg"
   },
   { persona:"Khalil Gibran - جبران خليل جبران بن ميخائل بن سعد",
     frase:"El silencio del envidioso está lleno de ruidos.",
     foto:"http://www.hannaharendtcenter.org/wp-content/uploads/2015/05/111.jpg"
   }
];

Esta vez solo te he puesto dos frases para que veas como se carga el array que luego vas a leer desde el javascript. Si no quieres que aparezca la foto o alguno de los dos textos solo tienes que borrar donde ponga persona, frase o foto depende de lo que no quieras que aparezca, si necesitas el css dimelo y te lo pongo tambien, aunque creo que lo que quieres hacer, tendrás que crearte el tuyo propio

un saludo

Ruben Manzano

Posted 2016-09-29T08:37:57.173

Reputation: 46

1Hola amigo ;) Gracias por el ejemplo pero me parece muy extenso :( el ejemplo de mi pregunta el codigo es corto resumido, lo que necesito de aquel código es que el carousel de logotipos sea automático de ambos lados es decir que se mueve a la izquierda y retroceda a la derecha que se mueva en ambos lados, y que tenga in efecto de mover los logotipos tanto como la derecha como a la izquierda como un botón solo que en vez del botón al tener presionado con el click izquierdo del maus mover las imágenes a ambos lados.May 2016-10-03T11:49:24.947

1Y el testimonio de clientes que se automático, aquel testimonio cambia de testimonio por las flechas pero me gustaria que fuera automático también. Sí me podrías ayudar con el código de mi pregunta sería lo máximo porque me es más fácil estudiarlo es más corto. Gracias saludos, buen día :)May 2016-10-03T11:50:19.127

4

Eso se puede realizar con bootstrap, no es necesario reinventar el hilo negro.

Te dejo un ejemplo, pon atención al siguiente div.

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="3000">

En este div se configuran las propiedades de el carrusel, data-interval representa el tiempo en milisegundos, que va a tardar en pasar de una imagen a otra.

Si es de tu gusto realizarlo con javascript solo tendrias que realizar lo siguiente:

<script>
    $('.carousel').carousel({
        interval: 3000
    })
</script> 

Si necesitas configurar mas el carrusel, visita el siguiente link http://getbootstrap.com/javascript/#carousel donde puedes observar todas las propiedades que puedes configurar.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="3000">
          <!-- Indicators -->
          <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
          </ol>

          <!-- Wrapper for slides -->
          <div class="carousel-inner">
            <div class="item active">
              <img src="http://placehold.it/1200x315" alt="...">
              <div class="carousel-caption">
                <h3>Caption Text</h3>
              </div>
            </div>
            <div class="item">
              <img src="http://placehold.it/1200x315" alt="...">
              <div class="carousel-caption">
                <h3>Caption Text</h3>
              </div>
            </div>
            <div class="item">
              <img src="http://placehold.it/1200x315" alt="...">
              <div class="carousel-caption">
                <h3>Caption Text</h3>
              </div>
            </div>
          </div>

          <!-- Controls -->
          <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
          </a>
          <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
          </a>
        </div> <!-- Carousel -->

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

sibok666

Posted 2016-09-29T08:37:57.173

Reputation: 41