soy Kseso y esto EsCSS

Slider RWD pantalla completa paso automático. Puro Css

Slider RWD pantalla completa paso automático. Puro Css

·Por Kseso ✎ 30
Slider RWD pantalla completa paso automático. Puro Css

Lo siguiente es una demo de las posibilidades de css utilizando viejas técnicas y nuevos valores o propiedades para lograr un slider que se muestra cubriendo toda la ventana (con independencia del tamaño y su relación x/y). Puede alojar cualquier tipo de contenido.

La idea y el esquema de bloques es sencillo. Todo se reduce a una caja general (header) que ocupará toda la ventana y dentro el slider con sus diapositivas individuales. El tamaño de todo lo marcará el tamaño de la ventana o viewport.

Esto facilita y simplifica incluir más o menos diapositivas y los cálculos necesarios para que todo funcione correctamente, pues sólo es necesario ajustar un par de valores para cubrir cualquier situación (tamaños y número de sliders).

Pero antes de entrar a ver en detalle y explicados paso a paso los códigos implicados aquí tienes un par de enlaces y la demo en funcionamiento

See the Pen Slider RWD pantalla completa paso automático. Puro Css by Kseso (@Kseso) on CodePen.

Ver códigos - Ver demo a full

El marcado Html

El etiquetado no es crítico, puedes adaptarlo sin mayor problema a cualquier situación. Yo parto del siguiente para la demo:

<header class="cont-slider"> <section class="slider"> <article class="slide uno"><span>Por Sendas </span></article><!-- --><article class="slide dos"><span>Veredas y</span></article><!-- --><article class="slide tres"><span>Carriles del</span></article><!-- --><article class="slide cuatro"><span>Bosque Css</span></article><!-- --><article class="slide cinco"><span>con Kseso</span></article> </section> </header>

Los comentarios vacíos <!-- -->

Si al ver los comentarios vacíos <!-- --> intercalados entre cada article y repartidos entre las dos líneas te has imaginado que los slides van a ir declarados como elementos inline-block y que no quiero espacios de separación entre ellos ¡acertaste!. Si desconoces y te suena a nuevo este aspecto, pasa por el artículo explicativo: Display: inline-block y su empeño en dejar espacios en blanco de separación. 8 soluciones.

El objetivo de este html y todas las reglas Css previas a la animación es crear una estructura como el siguiente esquema de bloques:

Esquema bloques slider RWD 100% viewport
Esquema bloques slider RWD 100% viewport

Declarando estilos o la magia del Css

Vamos con las cajas de afuera hacia dentro para lograr nuestro propósito.

Paso 1: el contenedor general.

El header que hace las veces de contenedor general en los dos significados de "contenedor": que aloja a los otros y a la vez que los mantiene dentro sin permitir que sobresalgan y se muestren:

.cont-slider { position: relative; height: 100vh; max-height: 100vh; width: auto; min-width: 100vw; margin: 0 auto; overflow: hidden; }

Opto por declarar las medidas en vw y vh para asegurarme que el slide va a ocupar toda la ventana del navegador o viewport del aparato, con independencia de su tamaño y relación de la ventana y que el slider sea hijo directo o no del body. Más info en este artículo.

En la anchura y si es hijo directo del body la unidad vw puede cambiarse por %. Son equivalentes. Pero en la altura el % ya toma como base de cálculo a su padre, que nunca será el viewport sino el body. Y sólo en ocasiones puntuales coincidirán.

Como es lógico, para una realización "industrial" deberás sopesar si mantener estas unidades o cambiar por otras mejor soportadas.

Es en esta caja en la que hay que adaptar y declarar las medidas que queramos que tenga nuestro slider. Si quieres que no ocupe toda la pantalla y sólo una porción de ella, aquí debes actuar.

Paso 2: El slider o caja deslizante

Con el paso 1 hemos construido un visor para el deslizante. Gracias a la declaración overflow: hidden nos aseguramos que no se mostrará más porción de su contenido que la que deseemos y ni aparecerán scrolls ni movimientos al desplazar los sliders.

Así que en este paso lo que hacemos es crear una caja contenedora de todas las diapositivas o slides posicionada de forma absoluta en la esquina superior izquierda de su padre:

.slider { position: absolute; left: 0; top: 0; width: 500%; height: 100%; }

En esta regla, la única declaración que hay que modificar si decidimos variar el tamaño o número de imágenes a mostrar es la anchura. La altura se adapta al valor de su caja padre. Y la anchura como ves son tantos 100% como deslizantes mostremos. En la demo son 5, así que width: 500%.

Paso 3: los slides o pasos individuales

El css asociado a estas cajas es el siguiente:

.slide { position: relative; display: inline-block; width: 20%; height: 100%; background-size: cover; background-position: center center; background-attachment: fixed; }

Como queremos que se coloquen adyacentes y en la misma línea (eje x) están como relative e inline-block. Y su altura al ser del 100% computará sobre la de su ancestro, que vuelve a ser el valor declarado en el header.cont-slider

El valor de la anchura es el que hay que modificar en función del número de slides que compongan el slider. Como en la demo son 5 = 1/5 ó 20%. Si fuesen 2 sería el 50% y si 10 el 10%. Así que una pequeña sugerencia para que no haya pequeños errores de redondeo. Evita el 3 y sus múltiplos (33´33...%) o aquellos que no sean divisores perfectos de 100.

Con las declaraciones de grupo background y los valores elegidos nos aseguramos que:

background-size: cover;
La imagen cubrirá toda la caja sin deformarse. Se escala sin deformarse y el sobrante (en función de la relación ancho/alto de la imagen y su caja) no se muestra. Queda fuera de la vista.
background-position: center center;
El lugar referente para ubicar la imagen de fondo. A voluntad de cada uno en cada situación.
background-attachment: fixed;
¿Cómo deseamos que se comporte la imagen al desplazarse la caja que la contiene? Elijo el valor fixed porque para la demo quiero lograr un efecto de que la imagen a mostrar "llega y se sobrepone" a la que se está viendo, sin desplazarla.
Este valor también hace el efecto parallax si tenemos más elementos que el slider y hay scroll vertical para mostrarlos.

Puedes ampliar este aspecto en el artículo Novedades Css3 en la propiedad background Así podrás crear otros efectos según tus gustos o necesidades.

Paso 4: asignado las imágenes individuales

Si vuelves al marcado html verás que cada diapositiva o article tiene asignada dos clases. Una común a todos (.slide) y otra única y diferente para cada cual (.uno, .dos...) Son estas las utilizadas para incluir una imagen diferente en cada uno vía fondo:

.uno { background-image: url(ruta/pic1.jpg);} .dos { background-image: url(ruta/pic2.jpg);} .tres { background-image: url(ruta/pic3.jpg);} .cuatro { background-image: url(ruta/pic4.jpg);} .cinco { background-image: url(ruta/pic5.jpg);}

Esto no tiene "más allá"

Paso 5: la leyenda

En la demo sólo hay una leyenda o título en cada diapositiva, colocada en el lateral izquierdo y centrada en la vertical. Para ello y para que su tamaño se ajuste en función del tamaño del viewport, como el resto de elementos, vuelvo a utilizar las mismas unidades en el tamaño de la fuente, la altura de línea y top: vh. Vuelvo a repetir: en producción sopesa el uso de esta unidad.

.slide span { background: rgba(0, 0, 0, 0.3); border-radius: 0 5vh 5vh 0; color: #FFF; position: absolute; left: 0; top: 40vh; font-size: 20vh; line-height: 20vh; border: 1px solid rgba(255,255,255,.45); border-left: 0 none; }

Si tienes alguna duda sobre los valores para el centrado consulta el artículo Centrando al centro con Css. 20+2 maneras de lograrlo.

Con todo lo anterior ya tenemos todo listo y en su lugar, pero estático, esperando la chispa que lo anime. EL esquema de bloques de lo logrado sería el de la imagen (de nuevo):

Esquema bloques slider RWD 100% viewport
Esquema bloques slider RWD 100% viewport

La animación del slide

A estas alturas sólo nos queda dar movimiento a la realización. Para hacerlo sencillo y fácil de adaptar a cualquier situación actuamos no sobre cada slider individual sino sobre la caja que los contiene o <section class="slider">. El conseguir el esquema de bloques y sus relaciones era para este paso.

Paso 1: animation

Así que lo primero es añadir la declaración animation a ese elemento:

.slider { animation: deslizante 25s ease-out 0s backwards infinite; }

deslizante es el nombre de la animación que construiremos a continuación en la @keyframes deslizante {}. 25s es el tiempo que se tomará cada ciclo completo de la animación. ease-out es la forma o comportamiento de cada diapositiva al pasar de no visible a visible. 0s es el delay o retardo al iniciarse la animación. backwards es el valor para cómo se debe comportar la animación completa al completar un ciclo para regresar al inicio del siguiente. infinite es el número de ciclos que se repite la animación.

Para una mejor comprensión de la propiedad animation y todas las que engloba y sus valores posibles tienes el artículo @keyframes Animaciones con Css3. Guía de inicio

Paso 2: @keyframes

Todo listo para establecer cada uno de los pasos o fotogramas que componen la animación del slide. Para ello actuamos cambiando el valor de la propiedad left de la caja "slide" contenedora de cada diapositiva. Primero todo junto:

@keyframes deslizante { 0% {left: 0%; } /*Se muestra la 1ª*/ 15% {left: 0%; } /*Tiempo de transición entre 1 y 2*/ 20% {left: -100%; } /*Se muestra la 2ª*/ 35% {left: -100%; } /*Tiempo de transición entre 2 y 3*/ 40% {left: -200%; } /*Se muestra la 3ª*/ 55% {left: -200%; } /*Tiempo de transición entre 3 y 4*/ 60% {left: -300%; } /*Se muestra la 4ª*/ 75% {left: -300%; } /*Tiempo de transición entre 4 y 5*/ 80% {left: -400%; } /*Se muestra la 5ª*/ 94% {left: -400%; } /*Tiempo de transición entre 5 y 1*/ 100% {left: 0; } /*Vuelta al inicio*/ }

Como ves por los comentarios, hay tantos puntos de variación en el valor de 'left' como imágenes pasantes: 5. Y el valor del % de cada uno está relacionado con el número de ellos: 100/5= 20. Esto porque queremos un tiempo de visualización igual para todas. Si queremos alterar este aspecto y mostrar unas imágenes más tiempo que otras sólo es cuestión de alterar estos valores.

Los keyframes intermedios en los 15%-35%-45%... con el comentario "tiempo de transición:
El comportamiento es mostrar estática cada imagen durante un tiempo y a continuación un movimiento para ver la segunda. Y esto realizarlo con cada una.

Para ello introducimos esos valores. Así desde 0% a 15% la 1ª imagen se ve fija en su posición y la transición se realiza entre el 15% y 20%. Con las demás hacemos igual.

De la proximidad o no de estos valores de transición al de muestra (del 15% al 20%) dependerá la velocidad con la que cada imagen se desplaza desde la derecha hasta quedar fija en la izquierda.

Ver demo a full

Artículo publicado originalmente el 15 de Mayo de 2013. Actualizado el 13 de Agosto de 2015.

avatar del Editor del blog

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso