soy Kseso y esto EsCSS

Splash: slider manual puro Css

Splash: slaider manual RWD en puro Css. Imágenes vía fondos permite poner cualquier contenido en cada diapositiva.

Splash: slider manual puro Css

·Por Kseso ✎ 7

Splash: slider manual puro CssSi el en el artículo anterior veíamos a fondo cómo realizar un slider automático a pantalla completa adaptable a cualquier tamaño y relación de pantalla, en esta ocasión y como complemento, a petición del respetable, lo complemento con éste.

En este caso la transición entre imágenes es manual: el usuario tiene que seleccionar los botones correspondiente a cada diapositiva.

Y como no, condición obligada en estos tiempos, también RWD

Check out this Pen!

Por falta de tiempo en este ocasión no te desmenuzo paso a paso el código. Es cuasi idéntico al del Slider RWD a pantalla completa. Así que si tienes alguna duda déjala en los comentarios.

Ver demo Ver Códigos

Sólo un apunte al respecto: como en esta demo, a diferencia del anterior slider, el tránsito e realiza tras una acción del usuario se necesita un selector que haga posible pinchar e "a" y que cambie "b".

Para ello echamos mano de los selectores de hermanos. Y el elemento que recibe la acción (los círculos con el número) son inputs del tipo radio. Al compartir todos el mismo nombre nos aseguramos que no haya más de uno seleccionado simultáneamete.

<input type="radio" id="uno" value="1" name="tractor" checked='checked' /> <label for="uno">1</label> <input type="radio" id="dos" value="2" name="tractor" /> <label for="dos">2</label>

Y los selectores css que realizan el cambio:

input[id='uno']:checked ~ .visor {left: 0;} input[id='dos']:checked ~ .visor {left: -100%;} input[id='tres']:checked ~ .visor {left: -200%;} input[id='cuatro']:checked ~ .visor {left: -300%;}

Lecturas coplementarias

  1. Slider RWD pantalla completa paso automático. Explicación detallada de la estructura del slider y cómo adaptarlo a tus necesidades.
  2. Información, explicaciones y ejemplos de uso de las pseudoclases en el blog

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