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.
Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
¿Buscas trabajo de programador?
11 respuestas a “Slider jQuery Vertical con noticias”
Deja una respuesta
41 artículos que te podrían interesar
Ver más sobre
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
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.
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
Hola buenos días,
Esta respuesta te la podrá facilitar mejor el autor del plugin que estamos usando:
/*
Slider vertical
autor: coyr
Sitio: http://www.xoyaz.com
*/
Saludos
no hay hoje de estilo para este slider ?
la hoja de estilos se puede descargar del ejemplo en funcionamiento observando el código fuente
Excelente trabajo, simple, rapido, eficaz… la cagaste!!
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.
gracias! estaba buscando exactamente esto! fácil y claro 🙂
Thanks a lot 😉
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!