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.

Ver demo Descargar

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
(25 votos, promedio: 5 de 5)
Comparte en las redes sociales
¿Buscas trabajo de programador?

85 respuestas a “Carrousel de contenido HTML”

  1. David dice:

    Gracias amigo encantado

  2. Alexander dice:

    Muchas gracias con este slider se me facilito mas realizar un filtro dentro de el

  3. Fernando dice:

    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.

  4. Alejandro Alonso dice:

    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

  5. Juan Alvarez dice:

    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

  6. Andrea Belman dice:

    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!

    • Jose Aguilar dice:

      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.

  7. Hernan dice:

    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)

  8. Hernan dice:

    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?

    • Jose Aguilar dice:

      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

  9. luisfer dice:

    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

  10. Manuel Alejandro Villamizar dice:

    Hola amigo creo que no me sirve el script de movilidad me sale de la siguiente manera

    ambas flechas
    imagen1
    imagen2
    y asi…

  11. Cristina dice:

    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

  12. Robinson dice:

    ¿Cómo se puede centrar el carrusel en el centro de la venta? gracias!!

  13. luis dice:

    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

  14. David Pulido dice:

    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.

  15. Santiago García dice:

    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

  16. ramon cruz dice:

    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

  17. Angel dice:

    ¿Como lo puedo poner en el centro?

  18. Brian dice:

    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.

    • Jose Aguilar dice:

      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

  19. Augusto Rafael dice:

    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!

  20. Efraín dice:

    Buen día.

    Para ocuparlo con 30 imagenes?

    Muchas gracias.

  21. Efraín dice:

    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

    • Jose Aguilar dice:

      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

  22. israel dice:

    buen día, no puedo hacer que funcione, aparece el carrusel pero no se mueve.

  23. Freddy Gonzalez dice:

    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

  24. Javier dice:

    Muchisimas gracias, me sirvió mucho, supongamos que quiero colocar mas de 6 imagenes, como hago?, muchas gracias por la respuesta..

  25. niki dice:

    No me salio el carrousel salen una imagen abajo de la otra. Como puedo hacer?

    • Jose Aguilar dice:

      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

  26. 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.

    • Jose Aguilar dice:

      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

  27. Diana dice:

    Hola,

    donde le muevo para que sólo se vea una imagen ya que mi total son 3

  28. Juan Jose Hernandez dice:

    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!

  29. Adolfo dice:

    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.

  30. carlosbm dice:

    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

  31. A. Arriaga dice:

    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

  32. ton dice:

    gracias me sirvió d emucho

  33. Marc dice:

    Funciona a las mil maravillas. Es sencillo pero vistoso y funcional a la vez. Eres muy generoso por compartirlo.
    Muchas gracias José Aguilar.

  34. Alex dice:

    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);

    });

    });

  35. Alex dice:

    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;
    });

  36. Alex dice:

    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

  37. Jamz dice:

    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

  38. Diego dice:

    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

  39. Emilio dice:

    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

  40. Johnny Patino dice:

    Hola, ¿Se puede hacer responsivo el carrousel?

  41. pau dice:

    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?

  42. Daniel dice:

    Hola José:
    ¿qué parte del código permitiría que las cajas pasen de a tres y no una por una?
    Gracias

    • Jose Aguilar dice:

      Hola, no lo he probado pero posiblemente tengas que sustituir esto:

      posicion = posicion+1;

      por

      posicion = posicion+3;

      en el javascript

  43. David dice:

    Hola amigo, buen aporte; una consulta y como hago para que las imagenes se amplien tipo imagenes Lightbox.

  44. Luis Hernández dice:

    Muy buen aporte amigo, muy interesante.

  45. Ever dice:

    Una consulta como haría para que este carrusel sea auto-start

  46. luis dice:

    como se llama cuando hay varios sliders dentro de otro sliders principal tipo acordeon .. con carrusel joomla

  47. felizx dice:

    hola

  48. alejandro dice:

    seria bueno que haga con un ejemplo

  49. hugo dice:

    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

  50. Radelance dice:

    ¡Excelente! Justo como lo buscaba, y funciona a la perfección. Gracias.

  51. Alina dice:

    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.

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.