1. Con una cuenta podrás:

    • Publicar preguntas y pedir ayuda
    • Crear tutoriales
    • Acceder a contenido privado
    • Convertirte en un Héroe de la web
    Cerrar notificación
  2. Eres nuevo en la comunidad y necesitas ayuda?
    Sigue estos pasos y recomendaciones antes de publicar tu duda:
    Cerrar notificación

Tutorial Slider en CSS

Tema en 'Tutoriales de HTML y CSS' comenzado por apu314, 22 de Marzo de 2015.

  1. apu314

    apu314 Nuevo Miembro

    Se incorporó:
    1 de Marzo de 2015
    Mensajes:
    9
    Me gusta recibidos:
    10
    Puntos de trofeos:
    3
    Género:
    Hombre
    Localización:
    España
    Página web:
    Hace unas semanas me puse a investigar cómo hacer un slider únicamente con css. Buscaba y buscaba y solo veía sliders que usaban javascript o librerías de js como jQuery.
    Personalmente aún no me he puesto a estudiar profundamente javascript (aunque tengo pensado empezar dentro de poco, porque ya va a haciendo falta).
    Trabajo con CSS en su mayoría, por tanto me decidí a hacer un slider en dicho lenguaje usando los famosos keyframes. Aquí les voy a dejar una guía que hice para mi web, pero que quiero compartir con ustedes en este foro para que los que no sepan cómo hacerlo aprendan y los que ya saben dejen sus comentarios con sus críticas y consejos ;) Vamos allá

    El código HTML
    HTML:
    <div class="slider-container">
      <div class="slider">
        <a href="#"><img src="http://apu314.com/wp-content/uploads/2015/03/Miniatura-Clase-1-Curso-HTML-HTML5.png" alt="" /></a>
        <a href="#"><img src="http://apu314.com/wp-content/uploads/2015/03/Miniatura-Youtube-Curso-Csharp-2.png" alt="" /></a>
        <a href="#"><img src="http://apu314.com/wp-content/uploads/2015/03/Miniatura-Youtube-Curso-SQL.png" alt="" /></a>
        <a href="#"><img src="http://apu314.com/wp-content/uploads/2015/03/Miniatura-Clase-1-Curso-HTML-HTML5.png" alt="" /></a>
      </div>
    </div>
    Bueno, no quiero hacer spam, por eso he quitado los enlaces que tenían las imágenes.
    Sigamos. No creo que haga falta explicar este código puesto que es muy fácil de entender. Si tienen alguna duda pregunten en los comentarios y estaré encantado de resolvérsela.

    El código CSS
    Código (Text):
    body { margin: 0; }
    .slider-container { overflow: hidden; }
    .slider {
      position: relative;
      width: 400%;
      margin: 0;
      left: 0;
      text-align: left;
      font-size: 0;
      animation: 10s mov--der-izq infinite;
      animation-play-state: running;
    }
    .slider:hover {
      animation-play-state: paused;
    }
    .slider a img { width: 25%; float: left; }

    /*ANIMACIÓN*/

    @keyframes mov--der-izq {
      0% { left: 0%; } /*empieza em posicion inicial*/
      33.333% { left: 0%; } /*cambio de la primera a la segunda img*/
      38.333% { left: -100%; } /*se queda parado*/
      68.333% { left: -100%; } /*cambio de la segunda a la tercera img*/
      73.333% { left: -200%; } /*se queda parado*/
      93.333% { left: -200%; } /*Vuelve a mostrar la primera img para que no haya un salto repentino a la primera img*/
      100% { left: -300%; }
    }
    Usamos overflow: hidden para ocultar lo que no quepa dentro del tamaño del .slider-container
    El width 400% porque se trata de 4 imágenes.
    width: 25% porque queremos que todas las imágenes entren dentro de nuestro slider. Para ello dividimos 100/4 (100 es el 100% y 4 son el número de imágenes.
    ¿Por qué he puesto 4 imágenes si solo se ven 3? Sencillamente porque cuando acaba el slider, si ponemos solo 3, se nos ve un hueco, y no queremos que suceda eso. Para ello ponemos la primera imagen repetida otra vez en la última posición (digamos que es un pequeño fix).

    Las animaciones
    No creo que tenga mucha ciencia explicar esto, pero vamos al tajo.
    Es fácil. Los porcentajes nos indican la acción que se va a desencadenar en el tiempo que indicamos en dicho porcentaje (100% es el total de la duración de la animación y 50% la mitad de la animación). Ya con los demás valores vamos jugando para ajustar las velocidades de nuestra animación. En el código he explicado qué hace en cada momento de la duración del slider.

    Si quieren ver con más detalle el código pueden entrar aquí donde tengo una demo ;)
    Espero sus comentarios, críticas, consejos y dudas.
     
    Última modificación: 22 de Marzo de 2015
    A DieMedina, EloyGil, marjulio021_tapia y 2 otros les gusta esto.
  2. fromsix

    fromsix Nuevo Miembro

    Se incorporó:
    19 de Junio de 2016
    Mensajes:
    6
    Me gusta recibidos:
    1
    Puntos de trofeos:
    1
    Amigo que genial, justo lo que buscaba, muchísimas gracias por tu aporte....
     
  3. marjulio021_tapia

    marjulio021_tapia Nuevo Miembro

    Se incorporó:
    21 de Junio de 2016
    Mensajes:
    1
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Género:
    Hombre
    Excelente aporte muy buen aporte.!!
     
  4. EloyGil

    EloyGil Nuevo Miembro

    Se incorporó:
    26 de Junio de 2016
    Mensajes:
    2
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Género:
    Hombre
    Hola, me agrada mucho el slider de hecho esta muy bien para el proyecto que debo hacer, pero tengo una duda:
    Como puedo hacer que las imágenes las pueda yo mover con el dedo ya estando en un dispositivo movil? es lo unico que necesito, podrian ayudarme en eso :c o

    Soy nuevo en el foro agradeceria me enviaras solucion a mi correo
    Gracias de antemano, mi correo electrónico: elooygiil@gmail.com
     

Comparte esta página