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

xPor 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

Comentarios: 7

  1. Muy bueno felicidades!!! pero para hacer este mismo Slider Automático y con puro CSS que se requiere complementar al código. Saludos

    ResponderEliminar
    Respuestas
    1. ¿Buscabas algo como ésto?
      Sólo sería cuestión de ajustar medidas en la caja padre del slider que en esa demo es a pantalla completa.

      Un saludo

      Eliminar
    2. 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...

      Eliminar
  2. Podrias 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!

    ResponderEliminar
    Respuestas
    1. Interesante, Triny
      Creo 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

      Eliminar
  3. 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!

    ResponderEliminar
    Respuestas
    1. Sí, codepen está teniendo problemas esta tarde/noche, Den
      Si 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

      Eliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap