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 (6 votos, promedio: 5,00 de 5)
Cargando…

Comparte en las redes sociales

Escrito por Jose Aguilar - Experto programador Prestashop y Wordpress.

11 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!!

  • Raul Garcia dice:

    no hay hoje de estilo para este slider ?

  • Eduardo Chimal dice:

    Hola una pregunta…como el funciona el hecho de que el carousel cuando llega al ultimo elemento y pasas al primero este lo sobreescribe….ojala me puedas contestar…saludos

  • antonio dice:

    En cuanto a la primera noticia, se la salta como se podría poner para que espere 5 segundos y comience el carrusel. Lo he intentado pero no encuentro la forma es decir la primera noticia se la salta rápido sin tiempo de espera. Muchas gracias

    • Jose Aguilar dice:

      Quizá debes editar el archivo slider-vertical.js. Hay una variable que contiene el tiempo de espera. Si no lo resuelves deberás contactar con el desarrollador de este plugin que estamos usando.

Deja un comentario

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

*