Carrousel de contenido HTML
Un carrusel es un medio de diversión consistente en una plataforma rotatoria con asientos para los pasajeros. Tradicionalmente los asientos poseen formas de caballos de madera u otros animales, los cuales en muchos casos son desplazados mecánicamente hacia arriba para simular el galope de un caballo. Normalmente, la música se repite mientras el carrusel da vueltas.
Cualquier plataforma rotatoria también se puede llamar carrusel. En términos informáticos o, más concretamente, en el desarrollo Web, el concepto carrusel también está muy presente. Muchas páginas Webs tienen uno y se utilizan principalmente para mostrar publicidad en formato imagen o texto con el principal objetivo de destacar contenido y/o llamar la atención del usuario con su movimiento.
Debido a que este tipo de elementos es muy utilizando hoy en día, en este artículo vamos a ver como crear un carrousel con contenido HTML que está a la espera de que el usuario haga clic en las flechas que aparecen en los laterales del carrousel para pasar al resto de contenido no visible.
Tal como vemos en la imagen el carrousel está compuesto por elementos que tienen una foto, título y precio. Esto es un ejemplo. Teniendo la posibilidad de agregar contenido HTML, se puede incrustar cualquier tipo de código en cada elemento.
Para obtener este carrousel en el cuerpo de la págian o dentro de la etiqueta <body> puedes agregar un código similar al siguiente:
<div id="carrusel">
<a href="#" class="left-arrow"><img src="images/left-arrow.png" /></a>
<a href="#" class="right-arrow"><img src="images/right-arrow.png" /></a>
<div class="carrusel">
<div class="product" id="product_0">
<img src="gallery/01.jpg" width="195" height="100" />
<h5>Lorem ipsum 1</h5>
<p>165.00 €</p>
</div>
<div class="product" id="product_1">
<img src="gallery/02.jpg" width="195" height="100" />
<h5>Lorem ipsum 2</h5>
<p>100.00 €</p>
</div>
<div class="product" id="product_2">
<img src="gallery/03.jpg" width="195" height="100" />
<h5>Lorem ipsum 3</h5>
<p>250.00 €</p>
</div>
<div class="product" id="product_3">
<img src="gallery/01.jpg" width="195" height="100" />
<h5>Lorem ipsum 4</h5>
<p>75.00 €</p>
</div>
<div class="product" id="product_4">
<img src="gallery/02.jpg" width="195" height="100" />
<h5>Lorem ipsum 5</h5>
<p>65.00 €</p>
</div>
<div class="product" id="product_5">
<img src="gallery/03.jpg" width="195" height="100" />
<h5>Lorem ipsum 6</h5>
<p>40.00 €</p>
</div>
</div>
</div>En cabecera de la página o dentro de la etiqueta <head> agrega el código jQuery que permite el dinamismo:
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script>
var current = 0;
var imagenes = new Array();
$(document).ready(function() {
var numImages = 6;
if (numImages <= 3) {
$('.right-arrow').css('display', 'none');
$('.left-arrow').css('display', 'none');
}
$('.left-arrow').on('click',function() {
if (current > 0) {
current = current - 1;
} else {
current = numImages - 3;
}
$(".carrusel").animate({"left": -($('#product_'+current).position().left)}, 600);
return false;
});
$('.left-arrow').on('hover', function() {
$(this).css('opacity','0.5');
}, function() {
$(this).css('opacity','1');
});
$('.right-arrow').on('hover', function() {
$(this).css('opacity','0.5');
}, function() {
$(this).css('opacity','1');
});
$('.right-arrow').on('click', function() {
if (numImages > current + 3) {
current = current+1;
} else {
current = 0;
}
$(".carrusel").animate({"left": -($('#product_'+current).position().left)}, 600);
return false;
});
});
</script>El código anterior también puede ser agregado dentro del cuerpo de la página, justo antes de la etiqueta de cierre.
En él estamos controlando el evento clic de las flechas derecha e izquierda para mover con animación los elementos del carrusel.
Finalmente, faltan agregar algunas reglas de estilo para definir el diseño del carrusel que puedes agregar en tu hoja de estilos CSS:
#carrusel {
float:left;
width:600px;
overflow:hidden;
height:203px;
position:relative;
margin-top:20px;
margin-bottom:20px;
}
#carrusel .left-arrow {
position:absolute;
left:10px;
z-index:1;
top:50%;
margin-top:-9px;
}
#carrusel .right-arrow {
position:absolute;
right:10px;
z-index:1;
top:50%;
margin-top:-9px;
}
.carrusel {
width:4000px;
left:0px;
position:absolute;
z-index:0;
}
.carrusel>div {
float: left;
height: 203px;
margin-right: 5px;
width: 195px;
text-align:center;
}
.carrusel img {
cursor:pointer;
}
.product {
border:#CCCCCC 1px solid;
}Bien es cierto que existen una infinidad de plugins para agregar un carrusel en tu sitio Web pero, en la mayoría de los casos, quizá tienen demasiadas opciones que con frecuencia no sabes manejar o se requieren de mucho espacio en el servidor para depositar sus archivos. Este código es muy simple y liviano. Se puede personalizar fácilmente si tienes conocimientos avanzados sobre jQuery.
Para adaptar este código a los dispositivos pequeños es posible utilizar media queries.
Autor
¿Buscas trabajo de programador?
89 respuestas a “Carrousel de contenido HTML”
Deja una respuesta
126 artículos que te podrían interesar
Ver más sobre
Soy principiante en programacion, espero me puedan ayudar, como puedo crear un carrusel infinito, que me muestre el contenido de dos paginas??
Cada pagina, debera msotrarse 30 segundos,
Gracias de antemano
Hola,
Me gustaría hacer lo que pides pero me va a suponer más de 1 hora. Tu solicitud la podemos estudiar a través de nuestro centro de soporte técnico. Puedes enviar todos los detalles y lo valoramos:
https://www.jamodules.com/es/soporte
Saludos
HOLA BUENAS. HE IMPEMEMTADO TU CODIGO EN MI PAGINA WEB Y SOLO PUEDO VER 15 IMAGENES. COMO PUEDO HACER PARA WUE SE VEAN MUCHAS MAS?
GRACIAS
MUY BUENO EN CARRUSEL
Hola, Intenta jugar con el ancho del contenedor del carrusel para ver como adaptarlo a tu galería. Saludos
Gracias amigo encantado
Muchas gracias con este slider se me facilito mas realizar un filtro dentro de el
Hola! una consulta ¿como hago para que este carrusel sea para 2 filas? es decir una debajo de otro compuesta por 4 imágenes por ejemplo.
Hola,
Deberás aplicar algunos ajustes en la hoja de estilos y posiblemente re acomodar el html y jQuery para hacerlo funcionar tal y como deseas.
Saludos
No entiendo por que la razon de pedir cuantos elementos va a tener el carusel y en cada vez que se hace el scroll pedir el id de un elemento del carusel, ojala que pudieras hacer uno así como el que pones en este ejemplo pero sin que pida el numero de elementos que va a contener el carusel y sin que pida también el id de un elemento del carusel
Oye quiero hacer varios carruseles pero en una solo pagina ya que es una de ventas… y lo he logrado PERO todo se mueven al dar click en las fecha quiero que se muevan cada carrusel no q se muevan todos q puedo hacer????? muchas GRACIAS
Hola,
Tendrás que usar clases en vez de identificadores de los carouseles.
Saludos
Hola, excelente tutorial, es el mejor que he encontrado del tema, sencillo de aplicar y fácil de entender.
Tengo 2 cuestiones:
1. Como podría hacer para que el carrusel se desplace de manera automática cada 2 segundos por ejemplo pero que el usuario pueda seguir manipulándolo con las flechas cada que guste.
2. como puedo sacar las flechas del carrusel, quisiera ponerlas mas alejadas pero cuando muevo su posición se van perdiendo.
Gracias y saludos!
Hola,
Intentaré darte una respuesta a tus dudas a continuación:
1. Para considerar esto tendrás que modificar la lógica del código JavaScript para conseguir tu propósito. Se que se puede pero requiere un esfuerzo adicional.
2. A través de la hoja de estilos css puedes posicionar las flechas donde tu quieras.
Que tal buenos dias! me salta este error al terminar de recorrer el carrusel. alguna ayuda??
Uncaught TypeError: Cannot read property ‘left’ of undefined
at HTMLImageElement. (Inicio:607)
at HTMLImageElement.dispatch (jquery-3.2.1.js:5206)
at HTMLImageElement.elemData.handle (jquery-3.2.1.js:5014)
Hola,
Dejaré este tema abierto por si alguien sabe que puede estar ocurriendo en tu caso.
Saludos
Hola que tal, una pregunta. estoy adaptando el script a mi web, pero tengo poco conocimiento de jquery, me surge un error tanto con el left y el right que cuando termina de recorrer el carrusel me lleva al inicio del index, alguna solucion?
Hola,
Parece ser que este efecto no está presente en el ejemplo en funcionamiento.
Intenta fijarte si lo copiaste todo bien. Si no lo consigues, comparte tu código, quizá alguien pueda ayudarte.
Saludos
Hola Jose como puedo hacer que las imágenes pasen de forma infinita, y no se vea el corte entre la ultima imagen y la primera
Saludos espero puedas ayudarme
Hola,
Tendrás que hacer algunos ajustes a la parte css y seguramente buscar algún efecto, quizá con jQuery, para conseguir lo que deseas.
Saludos
Hola amigo creo que no me sirve el script de movilidad me sale de la siguiente manera
ambas flechas
imagen1
imagen2
y asi…
Hola buenas, como se podrían poner dos o más carruseles en la misma página? Es que he intentado cambiar un par de cosas pero no me sale nada
Hola,
Para este carrusel tendrás que copiar el código HTML y JavaScript para cambiarle las variables y identificadores.
Saludos
¿Cómo se puede centrar el carrusel en el centro de la venta? gracias!!
Hola,
Puedes probar con agregar al elemento #carrusel:
margin:0px auto;
y quitarle el:
float:left;
Otra posibilidad más moderna es usar flexbox.
Saludos
saludos espeor me puedan ayudar ya q el carrusel me funciona hasta con 20imagenes y de ahi ya no pasa lo pruebo con mas y no las muestras ya intente modificar numimages y nada espero su ayuda gracias
Hola,
Si nos puedes facilitar un enlace, seguramente podremos ayudarte mejor.
Saludos
No lo logre incluir el carrusel en nada, haciendo todo lo q dijiste, teniendo en cuenta HTML y css pero nada, solo aparecen las imágenes en columnas pero no en carrusel ni nada. Pero gracias de igual forma.
Hola,
Revisa la consola de tu navegador. Quizás te da una pista del error que pueda estar ocurriendo en tu sitio web.
¿No sabes que es la consola? Revisa el siguiente enlace:
https://www.jose-aguilar.com/blog/consola-del-navegador-para-javascript/
De todas formas, también tienes la descarga del código de ejemplo donde podrás observar que todo funciona correctamente.
Saludos
He consultado varias páginas con código para slider… y la tuya es la única que me ha funcionado. Con dos retoques lo he dejado como quería.
Gracias, José!!!
Por tu tiempo y por explicarlo tan bien!! ***** 5 estrellas pa ti pa siempre
buen día Jose:
para hacer que aparezcan mas imágenes visible, por ejemplo:
if (numImages <= 3) aparezcan 6 ya lo intente pero siguen apareciendo solo 3, gracias
Hola,
En este caso debes modificar también los css para ajustar el carousel a 6 imágenes.
Saludos
¿Como lo puedo poner en el centro?
Hola,
Para el código del ejemplo es tan sencillo como agregar la siguiente regla css:
margin: 0px auto;
al contenedor con id=»carousel»
Saludos
Muy buen aporte, pero no me funciona el movimiento. Creo que es por el enlace del href»#». Que es lo que va en lugar del #?
Muchas gracias, Saludos.
Hola,
El enlace debe ser con «#» para el caso del ejemplo. Si no funciona quizá la librería jQuery no está bien instalada en tu sitio. Revisa si fuera eso.
Saludos
A mi no me funciona 🙁 no me aparece las flechas. ya agregue la librería jquery Download the compressed, production jQuery 3.3.1 quiero saber que debo colocar en el a href»#» que está antes del class=»izquierda_flecha» en html. Es decir
¡Muchas Gracias!
Hola,
Para que aparezcan las flechas lo más importante es fijarse bien en el código CSS del ejemplo en funcionamiento.
Saludos
Buen día.
Para ocuparlo con 30 imagenes?
Muchas gracias.
Buen día.
Sabrías cómo modificar el código para que no se descuadre con 30 imagenes? pues con 6 funciona correctamente.
De antemano muchas gracias
Hola,
No estoy seguro pero quizás puedes cambiar lo siguiente:
var numeroImatges = 6;
Por:
var numeroImatges = 30;
y puede que ya funcione bien para tu caso.
Saludos
buen día, no puedo hacer que funcione, aparece el carrusel pero no se mueve.
Hola,
Revisa que la librería jQuery esté bien agregada en tu sitio. Lo ideal es que agregues este script
https://code.jquery.com/jquery-3.2.1.js
Saludos
Buen aporte, gracias me funciona. Una pregunta, quiero poner el codigo en una tabla y que aparezca de a una imagen a la vez para poder ampliarlas, que debo modificar???
Gracias
Hola,
No creo que haya inconvenientes para depositar todo el código dentro de una tabla y para ampliar las imágenes puedes usar el plugin fancybox. Aunque hay otros.
Aquí tienes un ejemplo de Fancybox -> https://www.jose-aguilar.com/blog/abrir-una-galeria-de-imagenes-con-fancybox/
Saludos
Muchisimas gracias, me sirvió mucho, supongamos que quiero colocar mas de 6 imagenes, como hago?, muchas gracias por la respuesta..
Hola,
Para colocar 6 imágenes tienes que ajustar la maquetación, el Javascript y el código CSS para mostrar estas 6 imágenes. Si necesitas ayuda con esto puedes enviarnos un ticket al centro de soporte técnico:
https://www.jose-aguilar.com/modulos-prestashop/es/soporte
y podemos estudiar como hacerlo
Jose Aguilar,
Saludos
No me salio el carrousel salen una imagen abajo de la otra. Como puedo hacer?
Hola,
Si no nos facilitas un enlace de tu carrousel + el código fuente del mismo será muy difícil saber que está ocurriendo en su página web. Solo podemos hacer suposiciones. En este caso, suponemos que hay algún problema en tu script o que falta la llamada a la librería jQuery.
Saludos
Para crear el código en un solo texto html.
¿Cómo quedaría?
Es que no he podido hacer que funcione y me interesa.
Hola,
Debes añadir todo lo que se explica en el tutorial en el mismo archivo html pero añadiendo las etiquetas que hagan falta para encapsular los códigos. Css dentro de , javascript dentro de etc.
Saludos
Hola,
donde le muevo para que sólo se vea una imagen ya que mi total son 3
Hola José
Muchas gracias por el script! Muy ilustrativo!
Una pregunta, podría presentar mas de 3 imágenes a la vez?
Saludos y Gracias!
Hola,
Si, es posible haciendo unas pequeñas modificaciones en el código.
Saludos
Buenas tardes, sois todos muy afortunados yo he seguido el ejemplo paso a paso y no hay manera de hacer que funcione. Por depronto #content definido en el CSS no se usa en ninguna parte.
Respecto al uso de Lightbox decir que en las imagenes se podria hacer algo como esto….
Y si tienes correctamente instalado LightBox apuntando a su JavaScript y el CSS pues al hacer click sobre la foto detectará <> y se abrirá en primer plano oscureciendo el fondo de la pantalla.
Bueno…pero a mi el ejemplo del slider no me funciona.
hola buenas tardes tengo una duda, si quiero que se presenten tablas provenientes de excel o de una base de datos no imagenes se podra hacer????
es que quiero hacer un carrusel pero de varias tablas y que se muestren en un tiempo y cambien a otra (como las imagenes) pero no se si se pueda hacereso
de antemano gracias
Hola, si se podría hacer dentro de un iterador de la tabla de la base de datos. saludos
De antemano gracias por el aporte, es excelente, solo una duda si pongo mas de 16 imagenes ya no muestra a partir de la 16, alguien podria ayudarme con esto…gracias
gracias me sirvió d emucho
Funciona a las mil maravillas. Es sencillo pero vistoso y funcional a la vez. Eres muy generoso por compartirlo.
Muchas gracias José Aguilar.
Buenas, me gustaría hacer un pequeño aporte por si a alguien lo necesitara: COMO HACER QUE EL CARRUSEL CAMBIE CADA CUANTOS SEGUNDOS SOLO SIN FLECHAS CON MOUSEOVER Y MOUSEON
var posicion = 0;
var imagenes = new Array();
$(document).ready(function() {
//alert(jQuery(‘.texto’).html());
var numeroImatges = 8;
if(numeroImatges0){
posicion = posicion-1;
}else{
posicion = numeroImatges-3;
}
$(«.carrusel»).animate({«left»: -($(‘#product_’+posicion).position().left)}, 600);},2000
);
return false;
});
$(‘.izquierda_flecha’).hover(function(){
$(this).css(‘opacity’,’0.5′);
},function(){
$(this).css(‘opacity’,’1′);
});
$(‘.product’).live(‘mouseover’ ,function(){ clearInterval(izquierda_flecha);
});
});
Buenas, aver si alguien me puede echar un cable. he añadido un pequeño codigo al codigo fuente original, para que el carrusel empieze solo al darle a un boton. El problema que tengo es que si se le da varias veces al boton el carrusel empieza a ir muy rapido y no quiero eso. Como podría hacer que solo se le pudiera dar una vez al boton y luego se desactive?
$(‘.izquierda_flecha’).live(‘click’,function(){
izquierda_flecha = setInterval(function(){
if(posicion>0){
posicion = posicion-1;
}else{
posicion = numeroImatges-3;
}
$(«.carrusel»).animate({«left»: -($(‘#product_’+posicion).position().left)}, 600);},4000
);
return false;
});
hola, el carrusel es una pasada, lo que me gustaría es saber si se puede hacer que cuando no estes posicionado con el ratón sobre el carrusel, que este vaya cambiando (un autoplay pero sin boton play/stop). Si se puede me podríais decir el codigo y donde ponerlo? PS: no soy muy bueno con java… apenas se nada.
Gracias Saludos
Hola, se puede hacer pero hay que dedicarle un par de horas para hacerlo. Ahora mismo no tenemos ese tiempo para hacerlo. Saludos
Disculpa en esta parte script src=»../jquery.js donde descargo ese archivo o como lo consigo es que no hace la animacion solo muestra las imagenes y las flechas o que debo hacer
Hola buenas tardes,
La librería jQuery la puedes descargar de aqui -> https://jquery.com/download/
Saludos
Hola. Primero agradecerte enormemente el aporte de este genial scrip. De veras que me ha resultado de mucha ayuda.
Solo quería ir más allá y hacer posible que se ejecutara con eventos táctiles. O sea, al deslizar el dedo sobre las imágenes, también se desplazaran según la dirección del slide. Si pudieras ayudarme o darme alguna referencia te estaría muuuuuy agradecido.
Un saludo
Hola buenas tardes,
Quizás te resulte más sencillo implementar uno de los carousels que ya están implementados y que ya llevan la adpatación a los dispositivos más pequeños + el efecto deslizantes entre otras mejoras. Te recomiendo que le des un vistazo a:
http://www.jose-aguilar.com/blog/flex-slider/
Saludos
Buenas, estoy intentando usar tu código pero no funciona y no se xq es.
El tema es que en la función de javascript haces referencia a .izquierda_flecha y a derecha_flecha y, por lo que yo veo, no existe nada asi en el html.
No se si me explico.
Gracias
En los enlaces de las flechas falta el class corrrespondiente. Al copiar código no se porque se quitan los class
Super writing; keep it up.
Hola, ¿Se puede hacer responsivo el carrousel?
Si, con media queries
hola
estoy haciendo un carrusel con java script
pero no se como darle ubicacion en el centro de mi pagina
al crearlo se va al fondo
q debo hacer?
Hola, poner margin:0px auto; en el div padre del carousel suele funcionar.
Hola José:
¿qué parte del código permitiría que las cajas pasen de a tres y no una por una?
Gracias
Hola, no lo he probado pero posiblemente tengas que sustituir esto:
posicion = posicion+1;
por
posicion = posicion+3;
en el javascript
Hola amigo, buen aporte; una consulta y como hago para que las imagenes se amplien tipo imagenes Lightbox.
No creo que sea muy dificil. Tan solo hacer lo que se comenta en este tutorial:
http://www.jose-aguilar.com/blog/abrir-una-galeria-de-imagenes-con-fancybox/
Muy buen aporte amigo, muy interesante.
Una consulta como haría para que este carrusel sea auto-start
Pues no está implementado pero podría programar…
como se llama cuando hay varios sliders dentro de otro sliders principal tipo acordeon .. con carrusel joomla
hola
seria bueno que haga con un ejemplo
buenas noches soy de peru estoy tratando de poner en practica su codigo pero tengo probelmas. Segun comentas que el scrip lo pego debajo de body segui los paso pero no funciona por favor se puede descargar el scrip completo?
gracias
hufo
si, tan simple como eso
¡Excelente! Justo como lo buscaba, y funciona a la perfección. Gracias.
Hola! una consulta ¿como hago para que este carrusel sea para 2 filas? es decir una debajo de otro compuesta por 4 imágenes por ejemplo.
Gracias.
tendrías que cambiar la maquetación para conseguir un bloque de 4 imágenes y para el pasador de imágenes se deberá retocar el jquery