Lo que tendrias que hacer seria uso de las propiedades css de animation y keyframes
por ejemplo, supongamos que tenemos en tu slider 5 elementos (en tu caso son Articulos, pero me expresare como "elemento" a lo largo de mi respuesta
), el primer elemento de esos 5 tiene un ID llamado "bann", a bann en la hoja de estilo le tendrías que agregar las siguientes propiedades
Código:
#bann{
//"Intercambiar" es el nombre de la animacion, puede ser el nombre que gustes//
animation-name: intercambiar;
//la velocidad de la animacion, linear permite que la velocidad sea constante tanto al comienzo como al final//
animation-timing-function: linear;
//Permite que la animacion se revita n numero de veces, si ponemos infinite, no dejara de repetirce//
animation-iteration-count: infinite;
//Tiempo que durara la animacion//
animation-duration:35s;
//Estas son algunas de las propiedades, si quieres hacerlo mas compacto, puedes dejarlo de la siguiente forma//
animation: intercambiar linear infinite 30s;
}
Recuerda poner también los prefijos, -webkit-, -moz- etc. aun que si usas Prefixfree o algo parecido, ya te ahorraste el trabajo
Ahora bien, vamos a crear los keyframes, si te gustan las matemáticas, te vas a divertir un buen rato con esto
vamos a dividir esto en 3 partes (la 3ra ya no usamos las matematicas
):
1° Tenemos indicado en la animación un tiempo de
30 Segundos y supongamos que tengo
5 elementos para mostrar en el slider, si hacemos una división sencilla, sabemos que cada elemento se mostrara 6 segundos, hasta aquí no hay ningun problema.
2° los keyframes trabajan en porcentaje desde el 0% hasta el 100%, si nosotros dejamos indicada una transición asi, nunca se detendrán los elementos el tiempo suficiente para apreciarlo, por lo tanto, haremos "cortes" entre las transiciones para que se detengan un rato (llamemosle tiempo muerto) y después, pueda efectuarse la transición, asi que comenzamos
sabemos que nuestro tiempo de la animación son
30 Segundos, esto vendría siendo el
100%, pero, como tenemos 5 elementos, vamos a dividir ese 100% entre de 5, el resultado es del 20%, por lo tanto, cada 20% iremos efectuando un movimiento.
3° Una vez que tenemos establecido el porcentaje exacto de cada corte, procedemos a ponerlo en el keyframe, en este caso, vamos a suponer que nuestro elemento individual mide 300px de ancho, y todo miden lo mismo, ademas que estan uno a lada del otro sin ningun margen ( aplicando la propiedad float:left;)
Código:
@keyframes intercambiar {
0%{left: 0px; }
20%{left:-300px; }
40%{left:-600px; }
60%{left:-900px; }
80%{left:-1200px; }
100%{left:0px; } //para que la animación regrese al principio y pase por todas las anteriores//
}
pero, como lo explique anteriormente, si lo dejamos asi, nuestra animación no se detendría en ningún momento y avanzara fluida-mente del 0% al 100% sin darnos tiempo realmente de apreciar nuestro contenido, por lo que haremos los cortes
Código:
@keyframes intercambiar {
0%{left: 0px; }
19%{left: 0px; }
20%{left:-300px; }
39%{left:-300px; }
40%{left:-600px; }
59%{left:-600px; }
60%{left:-900px; }
79%{left:-900px; }
80%{left:-1200px; }
99%{left:-1200px; }
100%{left:0px; } //para que la animación regrese al principio y pase por todas las anteriores//
}
como puedes ver, nuestro corte lo hacemos durante el 19%(Tiempo muerto) de la animación por elemento, ese 1% lo usamos para movernos(Tiempo activo)
Espero que te sirva amigo, cualquier duda, comenta