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 Combo de sliders con puro CSS!

Tema en 'Tutoriales de HTML y CSS' comenzado por KaoruMishimaru_20, 9 de Septiembre de 2015.

  1. KaoruMishimaru_20

    KaoruMishimaru_20 Miembro conocido

    Se incorporó:
    11 de Agosto de 2015
    Mensajes:
    505
    Me gusta recibidos:
    318
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    KaoruMishimaru
    Localización:
    Argentina, Buenos Aires, La Plata
    Página web:
    [​IMG]

    Slider \ Slideshow \ PuroCss

    Hola mushashos! Prometí slider, tienen 3! Jajaja :D
    No voy a explicar el codigo, porque el CSS esta comentado.
    Solo quiero que tengan en cuenta algunas cosas.

    Si les molesta que use imágenes GIF en vez de JPG/PNG, no puedo hacer nada. Es mi forma de trabajar y así me gusta hacer las cosas.

    Acá adentro, hay que gente que sabe mucho, gente que puede solucionar un error en menos de una hora, yo no quiero que si no se ve bien tal cosa venga a quejarse (Si no sabes como solucionarlo, obviamente podes venir tranquilamente a preguntar o avisar que hay un error) Si sabes que hay un error, entonces publica la solución (En caso de que sepas que hacer).

    Yo no soy de hacer cosas responsive, pero si no te gusta, entonces porque no lo haces responsive, vuelvo a repetir, si sabes, si no sabes podes tranquilamente pedirme que lo haga responsive. Digo estas cosas, porque no me gustan las quejas, no me gusta porque estoy haciendo algo para vos, algo que a mi me cuesta tiempo, no te estoy cobrando, y lo que hago lo comparto con ustedes con todo el placer del mundo.

    Recomiendo poner en Codepen así:

    [​IMG]

    Capturas de pantalla:

    [​IMG]

    [​IMG]

    [​IMG]

    Demo Codepen:


    Fullscreen
    Normal
    Slider de articulos

    Descarga (Todos los sliders en un solo archivo + capturas + PSD de las capturas):

    Sliders (Tutorial para HDLW)

    :)

    Solo por avisar: Los sliders, son manuales, no automáticos.

    Miren las cosas que se pueden hacer con solo CSS. Con esto que les di, pueden cambiarlo y hacer infinidades de cosas. Usen sus conocimientos, al maximo.

    Enviado desde mi GT-S5301L mediante Tapatalk
     
    Última modificación por un moderador: 10 de Septiembre de 2015
    A fromsix y AngelKrak les gusta esto.
  2. gammafp

    gammafp
    Moderador
    Miembro del Equipo

    Se incorporó:
    12 de Enero de 2015
    Mensajes:
    825
    Me gusta recibidos:
    399
    Puntos de trofeos:
    63
    Género:
    Hombre
    Me gusta que solo lo hayas hecho con CSS es genial, solo una recomendación, los "P.D" agregalos en el mismo tema así se ve mas ordenado el post. Muchas gracias por los sliders, los implementaré en algun proyecto.
     
    Última modificación: 9 de Septiembre de 2015
    A AngelKrak y KaoruMishimaru_20 les gusta esto.
  3. KaoruMishimaru_20

    KaoruMishimaru_20 Miembro conocido

    Se incorporó:
    11 de Agosto de 2015
    Mensajes:
    505
    Me gusta recibidos:
    318
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    KaoruMishimaru
    Localización:
    Argentina, Buenos Aires, La Plata
    Página web:
    Gracias :D Pero, ¿Que es PTT?
     
  4. gammafp

    gammafp
    Moderador
    Miembro del Equipo

    Se incorporó:
    12 de Enero de 2015
    Mensajes:
    825
    Me gusta recibidos:
    399
    Puntos de trofeos:
    63
    Género:
    Hombre
    Perdón se me coló, quería decir P.D.
    Cambiando un poco de tema.
    Le he agregado un contador de tiempo a uno de tus slider para que tengan un poco de transición automática.
    Hay que refinarlo aún mas pero igual funciona.
    Ejemplo CODEPEN
    El script que hace el truquillo es este y se pega en el head:
    HTML:

    <script>
        function main() {
            var obj = document.querySelectorAll("input[type='radio']");
            contador = 1;
            setInterval(function(){
                if(contador < obj.length){
                   obj[contador].checked = true;
                   contador++;
               }
               else {
                   obj[0].checked = true
                   contador = 1;
               }
           }, 3000);
       }
       window.addEventListener("load", main, false);
    </script>
    P.D. Funciona con todos tus slider ya lo he probado.
     
    A AngelKrak y KaoruMishimaru_20 les gusta esto.
  5. KaoruMishimaru_20

    KaoruMishimaru_20 Miembro conocido

    Se incorporó:
    11 de Agosto de 2015
    Mensajes:
    505
    Me gusta recibidos:
    318
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    KaoruMishimaru
    Localización:
    Argentina, Buenos Aires, La Plata
    Página web:
    RE COPADO! Gracias :D Pero no me deja hacerle clic al label XDDD
     
  6. gammafp

    gammafp
    Moderador
    Miembro del Equipo

    Se incorporó:
    12 de Enero de 2015
    Mensajes:
    825
    Me gusta recibidos:
    399
    Puntos de trofeos:
    63
    Género:
    Hombre
    Raro a mi en el codepen si me deja hacer click.
     
  7. KaoruMishimaru_20

    KaoruMishimaru_20 Miembro conocido

    Se incorporó:
    11 de Agosto de 2015
    Mensajes:
    505
    Me gusta recibidos:
    318
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    KaoruMishimaru
    Localización:
    Argentina, Buenos Aires, La Plata
    Página web:
    Entonces debe ser otra cosa XD Pero gracias de todos modos. :D
     
  8. AngelKrak

    AngelKrak Héroe de la web

    Se incorporó:
    29 de Abril de 2015
    Mensajes:
    1.449
    Me gusta recibidos:
    664
    Puntos de trofeos:
    113
    Género:
    Hombre
    Ocupación:
    Freelancer
    Localización:
    Guadalajara
    Página web:
    :O sta genial, me gusto mas el Slider de Artículos *o* pero conmigo tiene un problema debe de ser por la pantalla "pequeña" de mi lap jajaja xD
    1366*768
    [​IMG]
     
    A KaoruMishimaru_20 le gusta esto.
  9. fromsix

    fromsix Nuevo Miembro

    Se incorporó:
    19 de Junio de 2016
    Mensajes:
    6
    Me gusta recibidos:
    1
    Puntos de trofeos:
    1
    Genial, voy a intentar probarlo, he estado intentado con uno pero no me convence jejeje, gracias por tu valioso aporte....
     

Comparte esta página