Splash: slider manual puro Css 21.5.13
Splash: slaider manual RWD en puro Css. Imágenes vía fondos permite poner cualquier contenido en cada diapositiva.
Splash: slider manual puro Css
Si 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ódigosSó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
- Slider RWD pantalla completa paso automático. Explicación detallada de la estructura del slider y cómo adaptarlo a tus necesidades.
- Información, explicaciones y ejemplos de uso de las pseudoclases en el blog
Kseso
the obCSServer ᛯ 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 Kseso
Muy bueno felicidades!!! pero para hacer este mismo Slider Automático y con puro CSS que se requiere complementar al código. Saludos
ResponderEliminar¿Buscabas algo como ésto?
EliminarSólo sería cuestión de ajustar medidas en la caja padre del slider que en esa demo es a pantalla completa.
Un saludo
Gracias por la respuesta, y felicidades nuevamente, tu blog es uno de los mejores que vi en mi vida jejeje quisiera tener tus conocimientos para hacer uno similar :) .Tal vez algún manual que me puedas recomendar porfa y Saludos...
EliminarPodrias poner un ejemplo de como realizar el slider automatico pero con posibilidad de que el usuario seleccione los input de manera responsiva simultaneamente?, es que aún no me queda claro como combinar los dos códigos de los dos tutoriales, que por cierto están excelentes!
ResponderEliminarInteresante, Triny
EliminarCreo que no será imposible hacer un combo de las 2. Claro que quizás haya algún aspecto que no acabe de lograrse sólo con css. Pero todo es cuestión de jugar un poco con los códigos.
Bueno, estate atenta a los próximos artículos.
Un saludo
Ufff estoy atrasadísima pero gracias a tu Blog me voy poniendo al día. Tal vez puedas ayudarme un poco estoy estancada en un problema con los imput, básicamente al hacer checked en los imputs el margin-left no se modifica. como puedo publicar lel código codepen, no funciona... Gracias!
ResponderEliminarSí, codepen está teniendo problemas esta tarde/noche, Den
EliminarSi ver tus códigos no sabría decirte, sólo elucubrar.
Así que si te parece bien una vez que codepen vuelva a estar en línea pega la url a tu ejemplo en un comentario (también puedes insertar el pen directamente) y veo qué pasa.
Un saludo