Slider jQuery Vertical con noticias

En el siguiente artículo vamos a hablar de un script jQuery que muestra un slider vertical con noticias y con sus botones de adelante y atrás.

Para implementar lo primero que deberemos hacer es incluir en el <head> los estilos y scripts jQuery’s necesarios para llevar a cabo la funcionalidad.

<link rel="stylesheet" type="text/css" href="css/slider-vertical.css" media="all" />
<script type="text/javascript" src="js/jquery.js"></script>
<script src="js/slider-vertical.js" type="text/javascript"></script>

Y seguidamente también en el <head> las funciones necesarias para mover los botones:

<script type="text/javascript">
$(document).ready(function() {
    moverSlider();
    $(".bajar-slider").click(function(){
        bajarSlider();
    });

    $(".subir-slider").click(function(){
        subirSlider();
    });

    $(".slider-vertical").mouseover(function(){
        verificar = 0;
    });

    $(".slider-vertical").mouseout(function(){
        verificar = 1;
    });
});
</script>

Después en el <body> tendremos que introducir los <div> necesarios para llamar a los eventos que ejecutarán el código jQuery. Lo podemos ver en el ejemplo en funcionamiento.

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (5 votos, promedio: 5,00 de 5)
Loading...Loading...

Comparte en las redes sociales

Escrito por Jose Aguilar - Experto programador Prestashop y Wordpress.

5 comentarios para “Slider jQuery Vertical con noticias

  • Mariana Dall dice:

    This is really fascinating, You are an overly skilled blogger. I’ve joined your feed and stay up for in quest of extra of your great post. Also, I have shared your web site in my social networks!

  • Cristóbal dice:

    Thanks a lot 😉

  • mayi dice:

    gracias! estaba buscando exactamente esto! fácil y claro :)

  • Bernardo Diaz dice:

    hola.. Jose.

    Me gustaria implementar un slider de noticias, como el que muestra aqui, pero, la verdad no se javascript, me gustaria que me explique como hacerlo, o que me facilites un ejemplo completo, porque no entiendo donde va los titulos que despliegas.

    gracias.

    Bernardo diaz.

  • Urielsv dice:

    Excelente trabajo, simple, rapido, eficaz… la cagaste!!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

*

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>