Qué es un carrusel de imágenes

Definición de un carrusel de imágenes

Un carrusel de imágenes es un conjunto de fotografías con texto (y opcionalmente botones) que se suelen presentar a tamaño completo en la sección de inicio de una página web.

Aunque también pueden aparecer en otras secciones de la web.

Cuál es la diferencia entre carrusel y galería de imágenes

A priori, la funcionalidad puede ser similar, el presentar unas imágenes dentro de la web.

El carrusel de imágenes suele presentar imágenes que ocupan toda la pantalla, además dentro de las imágenes se puede incluir texto, botones de acción para el usuario y algunas animaciones entre imágenes.

Ejemplo de un carrusel de imágenes

Las galerías de imágenes se pueden presentar en cualquier apartado dentro de la web. Suelen presentar imágenes a tamaño menor y al hacer clic sobre ellas se agrandan.

Algunas galerías de imágenes incluyen flechas para poder ver todas las imágenes, sin embargo, algunas otras, «apilan» todas las fotos hacia abajo.

Un uso habitual de una galería de imágenes es presentar los patrocinadores de una empresa.

Ejemplo de una galería de imágenes

Cómo se gestionan las imágenes de un carrusel

Para gestionar la creación de carruseles de imágenes, se deben diferenciar primero dos elementos muy importantes: El slider y slide.

¿Qué es un slider?

Un slider es el contenedor donde se van a introducir las imágenes, se puede decir que es la creación de la galería en donde habrá que introducir las imágenes.

Por poner un ejemplo, un slider podría ser el pasillo de un museo y en dicho pasillo se van a incluir varios cuadros.

Pero de momento sigamos con el slider.

Algunas configuraciones habituales de un slider son:

• Configurar el alto del contenedor o carrusel: que ocupe el 100% del alto o por ejemplo, tan solo 400px.
• Tiempo de transición entre imágenes.
• Seleccionar el tipo de flecha para indicar que hay más imágenes.
• Indicar que cuando llegue a la última imagen vuelva a la primera o no, realizando un bucle infinito.
• Otros parámetros para indicar el funcionamiento en pantallas péqueñas (responsive).

En una web se pueden crear tantos sliders como se necesiten.

Por último, aclarar que se debe asociar el slider a una página, es decir, si se crea el slider de nombre «Portada» se debe acudir luego a la página de inicio e indicar que se debe mostrar aquí el carrusel de nombre «Portada».

¿Qué es un slide?

Un slide es una imagen que se asocia al slider para que se muestre en la web.

Volviendo al ejemplo del museo, cada cuadro, es un slide y se debe decir en qué pasillo se va a colgar (recuerda que el pasillo era el slider).

Dentro de la configuración de la imagen o slide, se puede incluir:

• Textos
• Botones
• Otras imágenes más pequeñas a modo de logo

Cuando se está creando o editando un slide, según el plugin de gestión de carruseles, habrá que asociar el slide al slider, en otras palabras, hay que indicar la galería (slider) donde añadir dicha imagen (slide).

Ejemplo de carrusel

Se va a presentar el ejemplo del carrusel para la web Sicca. En esta web se ha planteado usar el propio gestor de carruseles del tema de Avada, dado que es muy fácil y rápido de aprender a manejar.

Ejemplo de la primera imagen de carrusel de la web de sicca.es

Ejemplo de la segunda imagen de carrusel de la web de sicca.es

Para esta web tan solo existe un carrusel (de nombre «Portada»), el cual contiene dos imágenes, como se puede ver en la columna «Cantidad».

Dentro de una imagen o slide, es donde se relaciona el slide con el slider, en este caso, tan solo hay un carruel de imágenes creado, por lo que se asocia cada imagen al slider.

Por último, en la página de inicio, se indica que se quiere usar el Avada Slider (ya que se pueden tener varios gestores de carruseles instalados) y finalizando, seleccionar el carrusel a mostrar.

En esta web tan solo hay creado un slider, pero puede ser interesante tener varios carruseles creados, por ejemplo, en una tienda online, para que según la temporada de la ropa se muestren imágenes diferentes.

Consejos finales

Procura que no haya más de 3 imágenes por carrusel. Pocos usuarios llegan hasta la tercera imagen.

Añadir una cuarta o una quinta imagen hará que cargues tu web con recursos y puede que realentices tu web, empeorando la experiencia de usuario, tu web debe cargar lo más rápido posible.

Recientemente Avada ha cambiado la gestión del Avada Slider, aquí tienes más información.

Finalizando, si quieres aprender más, te dejo estas entradas relacionadas con el tratamiento de imágenes, la primera es cómo nombrar a tus imágenes y la segunda sobre cómo tratar tus imágenes de cara a mejorar el posicionamiento de tu web.