Slider vertical en jquery

Hace unos dias estuve trabajando en un slider vertical y pues pensé que tal vez a alguien le podría interesar, entonces mejor lo comparto :). Espero lo disfruten y me cuenten como les funciona. El slider por defecto vá rotando solo. Al ubicarse sobre el, se detiene para que el contenido pueda ser leido y las flechas de control puedan usarse. Al retirar el mouse, el slider empieza de nuevo a rotar. Para realizar el efecto del movimiento infinito, el primer y el último módulo deben ser el mismo. Ver slider vertical

Esta entrada fue posteada el Tuesday 1 de July de 2008. a las 11:23 pm y fue archivada en CSS, jquery. Puedes seguir cualquier respuesta de este entrada a través del feed RSS 2.0 . puedes Dejar un comentario, o trackback desde tu sitio.

25 Responses to “Slider vertical en jquery”

  1. checho says:

    esta bastante bueno, pero se le pueden hacer mejoras, como la parte de que el primer y el ultimo modulo deben ser igual, y revisar los timeouts para que no suceda lo mismo que con la mayoria de los sliders que al hacer varios clicks seguidos en una de las flechas, se traba o sale un modulo en blanco

  2. coyr says:

    Gracias, si lo del primer y el último módulo es solo para hacer el efecto de movimiento entre último elemento y el primero. No se me ocurrio otra forma, dices es como replicar este elemento de manera dinamica cierto?

    Si estaba pensando lo de los clicks, no debería suceder. La función solo debería ejecutarse cuando allá terminado de realizar el movimiento, o qué cuando se esté ejecutando la función se desactive el click… puede ser.

    Estoy definiendo dos veces las variables, una dentro de la función y otra por fuera. Hay alguna forma de optimizar esto?

  3. matiasjajaja says:

    hola,

    Me gusta !

    Por mi parte yo trabajaría las sombras, creo que el lado izquierdo debería también de tener la misma lógica para la sombra. Lo que pintas en este momento no es una sombra “real” o que crearía una fuente de luz.

  4. andresmaro says:

    Buena implementación del jQuery ;), no vi el .js pero para hacerlo mas para dummies podría tener algunas variables modificables desde el contexto. Pues como para que sea mas fácil para nosotros los perezosos xD. Saluts

  5. Zypher says:

    Muchísimas gracias por el ejemplo !, estaba buscando algo así, y los que había visto hasta ahora no me convencían.

    Deberías publicarlo en http://ajaxrain.com (previo a que lo documentes un poco y lo conviertas en una API

  6. coyr says:

    Gracias!, acabo de actualizarlo porque había puesto unas propiedades que cambiaban el funcionamiento en ie. Además por ahora creo que no funciona para un sitio que contenta mucho contenido. La función moverSlider se llama a si misma y puede recargar el navegador. Debo revisar la forma en que se comporta.

  7. Bubble says:

    Entendia otra cosa por el titulo pero bueno, esta wapo!

  8. Manuel says:

    Hola. Disculpa mi desfachatez al venir aqui a preguntarte algo, pero me gustaria consultarte algo.
    He estado viendo el código de tu slider hecho en jQuery, y estoy adaptandolo para que muestre cíclicamente todas las entradas de una categoría de WordPress.
    La cuestion es que no logro hacer que haga el loop que hace tu ejemplo, apreto el boton de Noticia siguiente, hace un salto a la primera noticia, sin el efecto de transición en jQuery.

    Me gustaría saber si puedes guiarme en esto. De ser así, por favor contactate conmigo al e-mail que puse en este formulario de contacto.
    Desde ya, muchas gracias desde Argentina.

    Manuel.-

  9. coyr says:

    Hola Manuel. Primero que todo disculpa por responder tan tarde. Te he enviado un mail contandote el funcionamiento del slider. El slider hace el loop infinito porque el primer y el último elemento son el mismo, pero el contenido que tengo del ejemplo es estático y no estoy generandolo desde el javascript. A ese aspecto es que se refiere checho. Saludos y disculpa la demora ;)

  10. Jose says:

    Como pongo mi avatar!!!!!!

  11. coyr says:

    @jose A travez de Gravatar.

  12. Kelly says:

    Hola Coyr. Tengo varios dias buscando algo exactamente igual como este fantastico slider y al fin lo encuentro, lo malo es que con el codigo fuente del ejemplo que pones no puedo ver la hoja de estilo, Sé que es una pregunta estupida pero estoy dando mis primeros pasitos en esto y te agradeceria de sobremanera si pudieras ayudarme. Tambien me gustaria ponerme en contacto con Manuel, porque precisamente lo que quiero es mostrar una categoria en el slider, como segun entiendo el ha estado trabajando. Disculpa la molestia y Saludos.
    Kisses ;) K.

  13. coyr says:

    Hola Kelly, al revisar el código fuente de la página veras los archivos externos. la ruta directa al CSS es la siguiente http://labs.xoyaz.com/slider-vertical/slider-vertical.css

  14. Kelly says:

    Muchas gracias Coyr, ya vi todos los archivos externos, he estado probando y no me funciona, me supongo que es mi servidor porque estoy segura de haber segudi todos los pasos y no puedo ver los scripts, tambien he intentado con otros y lo mismo, de todos modos seguiré investigando, muuuchas gracias kisses ;). Tambien los invito a mi blog y me den su opinion.
    http://pepegrillo.com/

  15. coyr says:

    @Kelly Bueno el ejemplo deberias poder verlo en tu equipo sin necesidad de un servidor, es solo javascript ;)

  16. Raul says:

    Me gusto mucho esté plugin, ahora mismo lo implemento a los sitios de mis clientes :D

    Sería bueno que lo mejorarás, para ahorrar un poco de código XD

    Saludos

  17. coyr says:

    Muy cierto Raul, en realidad no es un plugin todavía así que esa es una tarea que tengo pendiente para optimizarlo y usarlo mucho más fácil

  18. Muy bueno, yo taba buscando esto aunque quisiera que se mueva solito sin darle click jejeje, voy a ver si lo modifico, Dios te bendiga!!!

  19. [...] se puede hacer con javascript, mejor aún con jquery, acá tienes más información: Slider vertical en jquery | Blog de diseño – Xoyaz o en Jquery Vertical Slide (Dropdown) Navigation. saludos. Visita Betaca | Aplicaciones y Web [...]

  20. medorio says:

    ya lo hice horizontal jeje

  21. fred says:

    como cojones piensas compartir algo a lo que no se puede acceder?????????? gil!!!!!!!!!!!!

  22. Diego says:

    Gracias¡¡¡ me fue de gran ayuda¡¡ yo tambien quiero colaborar cuando mis conocimientos avancen¡¡

  23. joel says:

    Me gusto que sea flexible pero gregale “min-width” a tu estilo porque llega un momento en que el contenido de una noticia se encima con otra, creo que igual se podria resolver algo para hacer el tamaño a lo ancho flexible pero tendria que detectarse con java el alto más grande.

    Saludos.

  24. walter says:

    esta chevere man sabes enviame el archivo por fa
    a mi correo electronico
    walter_merlin@hotmail.com

  25. Henry says:

    Como me descargo????

Comentar