DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
27-06-2017

En esta entrada veremos cómo crear un Carrusel automático e infinito con jQuery y un poco de CSS como el que está colocado en la cabecera de esta entrada como imagen promocional.

Definiendo la estructura HTML del carrusel infinito

Primero definimos la estructura del carrusel infinito mediante el siguiente HTML:

<ul id="c"> 
	<li><p><strong>1</strong></p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></li>
	<li><p><strong>2</strong></p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></li>
	<li><p><strong>3</strong></p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></li>
	<li><p><strong>4</strong></p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></li>
 
	<li><p><strong>5</strong></p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></li>
	<li><p><strong>6</strong></p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></li>
	<li><p><strong>7</strong></p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></li>
	<li><p><strong>8</strong></p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></li> 
 
	<li><p><strong>9</strong></p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></li>
	<li><p><strong>10</strong></p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></li>
	<li><p><strong>11</strong></p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></li>
	<li><p><strong>12</strong></p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></li> 
</ul>

Definiendo el estilo crítico del carrusel infinito

Definimos el CSS del ul para centrar el carrusel:

body > ul {
	position: absolute;
	top: 50%;
	width: 800px;
	height: 200px; 
	left: 50%;
	margin-left: -400px;
	margin-top: -130px;
}

Se mostraran 4 ítems por vez y de aquí el width con 25% para cada uno de los ítems:

ul > li {
    width: 25%;
    list-style-type: none;
    position: absolute;
    top: 0;
    padding: 20px;
    height: 200px; 
    opacity: 0;
    padding-top: 40px;
    text-align: center;
    transition: 1s opacity; 
}

El resto del CSS de propósito decorativo para nuestro carrusel infinito como podrá consultar en el código fuente que puedes descargar al final e inicio de esta entrada.

El siguiente código JavaScript con jQuery permite reiniciar el carrusel una vez llegado a su fin y de aquí lo de infinito y automático:

if (i 

En el experimento son 12 items a mostrar que se encuentran ocultos por defecto, si vemos por completo el código JavaScript veremos primero que hay un bloque de código que solo se ejecuta una vez que se encarga de activar los primeros 4 de manera automática sin necesidad de esperar los dos segundos y esto se debe a que son los primeros elementos de la lista que se muestran:

$("#c > li").eq(i).addClass('active').css('left', '0');
$("#c > li").eq(i + 1).addClass('active').css('left', '25%');
$("#c > li").eq(i + 2).addClass('active').css('left', '50%');
$("#c > li").eq(i + 3).addClass('active').css('left', '75%');

El resto del JavaScript se ejecuta mediante un método setInterval de manera consecutiva cada dos segundos e infinito y que se encarga de procesar dos bloques de lista por vez, agregando transiciones a cada uno de los grupo de 4 listado definidos:

$("#c > li").eq(i).css('transition-delay', '0.25s');
$("#c > li").eq(i + 1).css('transition-delay', '0.5s');
$("#c > li").eq(i + 2).css('transition-delay', '0.75s');
$("#c > li").eq(i + 3).css('transition-delay', '1s');
 
...
 
$("#c > li").eq(i).css('left', '0').addClass('active').css('transition-delay', '1.25s');
$("#c > li").eq(i + 1).css('left', '25%').addClass('active').css('transition-delay', '1.5s');
$("#c > li").eq(i + 2).css('left', '50%').addClass('active').css('transition-delay', '1.75s');
$("#c > li").eq(i + 3).css('left', '75%').addClass('active').css('transition-delay', '2s');

Como puedes ver, se establece un delay para cada uno de los ítems a mostrar para que se oculten de forma progresiva.

También se reinicia el contador debido a que son 4 items a mostrar por vez y de esta forma evitar desbordar el array:

if (i 

El experimento original lo puedes encontrar en el siguiente enlace: Infinite Automatic Carousel.


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Menú Radial con solo CSS

Menú Radial con solo CSS

Triangulo 3D animado con CSS

Triangulo 3D animado con CSS

Hover over the cards

Hover over the cards

Algunos artículos que te pueden interesar

Cómo crear una tabla con resaltado en columnas y filas (vertical y horizontal)

Cómo crear una tabla con resaltado en columnas y filas (vertical y horizontal)

En esta entrada veremos cómo crear una tabla sencilla con resaltados (highlight) sobre las celdas seleccionadas horizontal y verticalmente (columnas y filas).

Andrés Cruz 05-05-2016

Truco para los bordes en CSS: Bordes internos

Truco para los bordes en CSS: Bordes internos

En esta entrada veremos como crear bordes que no influyan en el tamaño del contenedor; como bien sabrás al definir distintas propiedades como padding, margin y/o border éstas repercuten directamente en el tamaño del contenedor.

Andrés Cruz 13-04-2015

Múltiples bordes en un contenedor con CSS

Múltiples bordes en un contenedor con CSS

Una manera muy sencilla de tener varios bordes o mejor dicho el efecto de tener varios bordes en un contenedor o elemento es utilizando la propiedad box-shadow.

Andrés Cruz 09-01-2014