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 desetInterval
. 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:
- Mover el primer elemento hacia la izquierda poniéndole un margen negativo
- Eliminar el primer elemento
- Añadirlo al final de la lista
- 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:
- Mover el último elemento al principio y ponerle margen negativo (sin animación)
- Animar el margen del primer elemento (antes último) para que sea 0
- 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 & 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 -->