On StackOverflow I found various questions about carousel among other topics based on my question.
Very useful questions as a guide:
Now my question is:
How to create auto move left and right?
I explain to myself to make the movement of the images move to the left taking into account the start of the game in this case it would be image 1 to image 6 and go back / return the movement to the right of image 6 to the main image so on.
How to create a horizontal scroll in the images or the content of the images?
In other words, being able to move the images or the content both to the right and to the left with this effect when trying to select the image, the only thing that can be achieved is to move the content of the carousel.
- Example: the effects of this customer carousel found at the bottom of this Digital Media website .
In the carousel of customer testimonials how to make the automatic movement in the customer testimonials.
Could you explain to me how to apply these effects.
$(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 & 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 -->
Let's do it in parts.
First the carousel of testimonials. What you want is for it to automatically animate without the need for the user to click on the buttons. You can do this in a very simple way: since you already have the action of the "previous" and "next" button, what you can do is create an interval that clicks the next button every X time .
That can be done with
setInterval(to create the interval) and the methodclick(without parameters) to fire the click event of an element. And it would be something like this:Which fires the click event of the next button every 2.5 seconds. Now, if you want to make it a bit more complicated, you could make it not automatic if the person hovers over the testimonials. For that the code would be something like this:
And here you can see it working:
Now the image scroll. As you have it done right now what your image scroll does is:
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:
Para ello sólo hace falta cambiar la función
rotateClientsque quedaría así:Aquí puedes ver el código funcionando:
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:
El código podría ser algo así:
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í:
Let's see, short... taking only from the one that I have given you before the code of the carousel with text and image:
This is the html and the javascript
and in this javascript document is where you load the text and the url of the image that you are going to show, in your case it would be the logo (I think)
This time I have only given you two sentences so that you can see how the array is loaded, which you are then going to read from the javascript. If you don't want the photo or any of the two texts to appear, you just have to delete where you put person, phrase or photo depends on what you don't want to appear, if you need the css tell me and I'll put it too, although I think what you want do, you will have to create your own
a greeting
Eso se puede realizar con bootstrap, no es necesario reinventar el hilo negro.
Te dejo un ejemplo, pon atención al siguiente div.
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:
Si necesitas configurar mas el carrusel, visita el siguiente link http://getbootstrap.com/javascript/#carousel donde puedes observar todas las propiedades que puedes configurar.