Una prueba que he realizado para un requerimiento del trabajo. Al final no la hemos utilizado, pero me ha quedado mona de forma muy sencilla y pongo el código por aquí por si le sirve a alguien.
Se puede poner cualquier numero y tamaño de li’s, a partir del código es fácil hacer botones para invertir el sentido del carrusel, ir a determinada imagen, etc. pero quería mantener el ejemplo con el mínimo número de lineas, tal y como esta son unas 40 lineas de CSS y 5 de JS.
El proceso es sencillo, animo el ultimo <li> de la “baraja” pasandolo al fondo de forma visual con CSS (alterando su z-index) y una vez terminada la animación (con un simple intervalo de igual o mayor duración que la animación CSS) convierto ese reordenamiento en “físico” moviendo el <li> en el DOM con JQuery, anulando el efecto CSS al mismo tiempo, y empiezo de nuevo el bucle.
Algunos detalles:
• Los ultimos 4 <li> tienen una rotacion escalonada y estan referenciados como :nth-last-child(), con lo que al alterar la posicion en el DOM con JQuery se recolocan.
• Pongo un mínimo de rotación, rotate( 0.1deg ), porque si ponemos rotación cero se desactiva el efecto y se aprecia un saltito raro en el suavizado.
• Los <li> no estan cerrados. Puede parecer raro pero es perfectamente valido en HTML desde el inicio de los tiempos. Además dejarlos abiertos tiene ventajas como que no aparece espacio entre los <li> al justificarlos con inline-block.