Nivo Slider: Slideshow de imagenes JQuery

Nivo Slider es un Slideshow de imágenes ultra liviano (5kb comprimido) hecho en JQuery.
Cuenta con 9 tipos únicos de transición, botones de anterior-siguiente y un control de navegación.
También es posible definir el periodo velocidad y pausa de la animación para un mayor control.

Exploradores Soportados: (Nivo Slider ha sido testeado en estos exploradores)

  • Internet Explorer v7+
  • Firefox v3+
  • Google Chrome v4
  • Safari v4
  • Opera v10.5

¿Cómo instalar Nivo Slider?

Para usar Nivo Slider deberás incluir en tu header JQuery (si no lo tienes integrado ya) y el Script y CSS de Nivo Slider.

<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>

Agregaremos el HTML para llamar las imágenes:

<div id="slider">
<img src="images/slide1.jpg" alt="" />
<a href="http://dev7studios.com"><img src="images/slide2.jpg" alt="" /></a>
<img src="images/slide3.jpg" alt="" title="This is an example of a caption" />
<img src="images/slide4.jpg" alt="" />
</div>

Finalmente escribimos el script usando la función $(window).load()
y les dejamos una configuración de ejemplo:

<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect:'random',
slices:15,
animSpeed:500,
pauseTime:3000,
directionNav:true, //Next & Prev
directionNavHide:true, //Only show on hover
controlNav:true, //1,2,3...
pauseOnHover:true, //Stop animation while hovering
beforeChange: function(){},
afterChange: function(){}
});
});
</script>

Diferentes tipos de efectos:

  • sliceDown
  • sliceDownLeft
  • sliceUp
  • sliceUpLeft
  • sliceUpDown
  • sliceUpDownLeft
  • fold
  • fade
  • random
Modificado por última vez el día 27 de noviembre de 2012 a las 17:20
  • hola soy nueva en joomla y cree mis slider sin ningun problema , y quiero insertar 2 en el mismo articulo, pero al insertar 2 Nivo-Szaki Slider en el mismo articulo el Nivo-Szaki Slider de tamaño mas pequeño se adapta al Nivo-Szaki Slider mas grande quedandome un espacio blanco, porque sucede esto??

  • Buenas con todos, estoy iniciando en esto pero tengo un problema, estoy hacinedo una web utilizando dreamweaver CS3 pero al momento que inserto el codido de nivo ya no se muestra el fondo de la web que sera……. gracias y saludos a todos.

  • Francisco Sanchez
    1 octubre, 2013 a las 11:52

    Buenas, he instalado el modulo de NivoSlider en una web, pero necesito que la animación no se detenga al momento de pasar el mouse o algún elemento por encima, que debo modificar para que dicha acción no ocurra? Gracias.

  • Buenas tardes
    He implementado en Drupal 6 el nivo slider, pero miestras estoy como administrador todo va de perlas, se ven las imágenes, las flechas de navegación…
    En el momento que dejo Drupal como administrador y entro en la página como cualqer usuario normal, no se ve nada, sólo unos puntitos en la región donde trendría que verse el bloque con las imágenes.
    Alguien sabe porqué
    Gracias

  • Hola Nicolás (y compañía),
    Me animo a escribir porque veo que tratáis muy bien a los nuevos.
    Hace algún tiempo “heredé” está página en la que he ido implementando varias mejoras, entre ellas NivoSlider.

    http://www.stua.com/index-jm.html

    Mi jefe está encantado, pero me pide que las imágenes del slide puedan ser copiadas, pues bastantes clientes se lo solicitan. He visto que en la mayoría de los casos las imágenes se copian y arrastran sin problemas ¿Porqué eso no sucede en el mío?

    Aquí otro ejemplo:
    http://www.stua.com/eng/proyectos/skidubai.html

    Gracias por todo y enhorabuena por la página ;-)

  • Bueno otro dato, queda estatico un tiempo y el slider sigue en funcion, pero revive como a los 20 segundos o un poco mas.

  • Alguien me puede ayudar por que motivos mi menu queda estatico como si no tuviese mas sub menu ni el efecto del hover funciona, pero comenzó a cuando coloque este slider. Gracias

  • Hola, excelente artículo, gracias por este aporte!
    Quería consultarles un pequeño problema… cuando ingreso a la página en la cual instalé el Nivo-Slider se ven todas las imágenes utilizadas al mismo tiempo y luego se acomoda y se ve solamente la primera.
    Probé poniendo en el body MM_preloadImages pero no funcionó, tampoco funcionó llamarlas previamente con css usando display:none.
    ¿Saben si se puede corregir?

  • hay forma de que este jquery se puede aplicar en varios divs ?

  • Hola esta super bueno, pero te hago una pregunta?… me dijieron que este archivo que yo baje desde la pagina de origen de nivo estaba con un codigo oculto que te direccionaba a una pagina que te hacia descargar el virius malicioso en tu computadora, yo lo revise entero y no encuentro nada raro, pero me da miedo que sea verdad, tu no haz visto nada raro??.. porfa avisame que he ocupado en muchas paginas este codigo. Gracias!!

  • bueno, despues de todo me surgieron 2 dudas:

    como hago con css para que aparezcan los numeros que indican el slide (1,2,3,4) como numeros dentro de un cuadradito de color? (cada uno dentro de su cuadrado)

    y otra… como reemplazo con css el texto “previous” y “next” por un gifs transparentes?? (next.gif y previous.gif)

  • pfffffffff no hay caso :(

  • ooops! se cortó el código, ahora si:

    $(window).load(function() {
    $(‘#slider’).nivoSlider({
    effect:’random’, // sliceDown, sliceDownLeft, sliceUp, sliceUpLeft, sliceUpDown, sliceUpDownLeft, fold, fade, random
    slices:15,
    animSpeed:500,
    pauseTime:3000,
    directionNav:true, //Next & Prev
    directionNavHide:true, //Only show on hover
    controlNav:false, //1,2,3…
    pauseOnHover:true, //Stop animation while hovering
    beforeChange: function(){},
    afterChange: function(){}
    });
    });

  • A pesar de mi entera desconfianza, FUNCIONO IMPECABLE A LA PRIMERA.

    Aquí les dejo el código completo:

    $(window).load(function() {
    $(‘#slider’).nivoSlider({
    effect:’random’, // sliceDown, sliceDownLeft, sliceUp, sliceUpLeft, sliceUpDown, sliceUpDownLeft, fold, fade, random
    slices:15,
    animSpeed:500,
    pauseTime:3000,
    directionNav:true, //Next & Prev
    directionNavHide:true, //Only show on hover
    controlNav:false, //1,2,3…
    pauseOnHover:true, //Stop animation while hovering
    beforeChange: function(){},
    afterChange: function(){}
    });
    });

    Gracias por posterlo!
    Saludos

  • Hola que tal, me gustó y me sirvió el tuto. Tengo un problemas con el tamaño de las imágenes que se muestran, cómo hago para cambiarle el tamaño al contenedor de imágenes para que se vean con el tamaño qu es, en cual css y cómo se cambia.

  • Buenas, he integrado bien el nivo, pero en otro sitio solo me carga la imagen cuando pincho en el link del propio sitio, cuando le doy la dirección en la barra y entra en la web me sale el texto pero la imagen no se ve ( no hay ), y es cuando pinchando en el logo que direcciona al site salen ya las imágenes. Es curioso porque si que hace el slide con el texto aunque no estén las imágenes.
    He mirado incompatibilidades con jquery y demás, pero no consigo dar con el problema, más cuando aún si funciona despues de clickar en el head del site!

    Gracias de antemano
    Miguel

  • Justo lo que estaba buscando, Gracias por el tutorial me ha servido muchísimo , felicitaciones por su trabajo

    It’s great, Thanks for the tutorial has helped me very much, congratulations on your work

  • Buenas tengo una duda, existe la posibilidad de colocar dos links dentro de una misma imagen, como usar mapas o algo así?, Gracias

  • Hola Eugenia, prueba esto a ver si te sirve:

    <script type="text/javascript">
    $(window).load(function() {
    $('#slider').nivoSlider({
    effect: 'random',
    prevText: false,
    nextText: false,
    });
    });
    </script>

  • Hola he implementado nivo en una página web, pero las imágenes me aparecen con un pequeño borde blanco, alguien sabe por que sucede esto y como se podria resolver? todas las imágenes tienen las mismas medidas
    acá va el link a la página http://www.kalavazzero.cl

    • Hola Kath, estuve mirando el código y lo que podría estar creando el borde blanco es un borde que tienes en #content #contenido #wrapper .slider-wrapper.theme-default

  • Excelente Demo, gracias por compartirlo!

  • hola, genial , exelente el slider, lo implementé a mi blog de prueva para luego pasarlo al que uso,, surge lo sgt: tengo en el html 3 imágenes pero en los puntos inferiores que al dar clic se ven las imágenes me salen 6, así que hace que se muestre anormal el funcionamiento, no encuentro la solución, me puede dar alguna sugerencia,, desde ya muy agradecido por tu tiempo, dedicación y esfuerzo,, un abrazo,, este es mi blog de prueba, http://fegasac.blogspot.com/2012/03/la-leyenda-de-la-imagen.html

    • Hola Jhonatan, no entiendo, te salen 6 imágenes y tienes 3? Las otras 3 son repetidas o salen de algún lugar? Estas usando el código del demo? Entre en tu sitio pero el Slideshow esta desarmado.

  • Hola, queria saber si me podian ayudar con un temita. Puse un slider y quisiera sacar los textos de “prev” y “next” y cambiarlos por imagenes de flechitas. como puedo hacer?? GRACIAS!!!

  • Buen tuto, gracias por el aporte; soy sincero, encontré su sitio casi por casualidad y la verdad que me gusta mucho, soy diseñador web bueno recién empezando en todo este mundo. Bueno nada saludos y muchos éxitos.

  • Hola coloque el script y funciona, pero tego un menu estilo ipod y por mas que busco y arreglo el estilo no se despliega, el menu que coloque es el flatmenu y es tambien un plugin de jquery que podria hacer, se le agradece toda la ayuda mil gracias. Bernard Millán…

  • pues a mi me funciona bien, lo unico que cuando hago click en algun boton del menu de la pagina se extienden todas las imagenes y vuelve a reproducirse.. como se soluciona eso??? gracias

  • ya está solucionado

  • Quería saber como poner nivo slider en joomla! Necesito alguna extensión o algo? gracias!

  • No se si puedas ayudarme, tambien trate de colocarlo en blogger y de hecho funciona pero las imagenes quedan sin un margen entre los demas elementos de el blog y no posee las flechas para navegar en el slide y los puntos, de hecho no se si pudieras ayudarme a que el slider quede identico al que maneja la pagina http://www.gameplanet.com, por lo que pude investigar tambien es el slider nivo, gracias por tu atencion

  • Al parecer el problema es el ancho de banda de la conexion a internet en los demas navegadores funciona pero el explorer al parecer quiere una buena linea para funcionar bien.

  • Hola tengo un problema con el nivo slider funciona muy bien mozilla firefox, opera, chrome perno no carga en internet explorer 8 y 9, cual podria ser el problema y como podria solucionarlo. cualquier sugerencia sera bienvenida…

  • Necesito saber como hago para que un vinculo externo en la misma pagina muestre el slide que yo le diga, osea si son 4 slide, que el vinculo especifico ejecute el 2.

    • Hola Fuser, no entiendo del todo tu duda, pero trataré de ayudarte. Lo que podrías hacer es colocar cada slider en una página diferente (page de WordPress) así linkeas en este vínculo externo la página del slider que deseas. Por ejemplo: “http://tusitio.com/slider-2″. Saludos!!

  • Hola, tengo un problema con el nivo slider, provoca que no se me vea el fondo de la página…y solo me sucede en IE, en firefox va bien…por q podría ser??

  • higicel Dominguez
    23 mayo, 2011 a las 19:41

    Hola ya llevo más de 6 meses usando el nivo slider y todo muy bien, pero en las últimas semanas he tenido que agregar el modulo de agrandar texto en mi página pero usa el mootools.js el cual hace conflicto con el jquery.js, actualicé a las últimas versiones tanto el mootools y jquery y jalo en firefox y chrome pero sigue sin jalar en explorer. ¿alguien sabe alguna solución para que puedan convivir estos dos archivos? se los agradecería mucho.

  • Fernando Molinari
    23 mayo, 2011 a las 6:08

    Documento sin título

    $(window).load(function(sliceUpLeft) {
    $(‘#slider’).nivoSlider({
    animSpeed:500,
    pauseTime:3000,
    directionNav:true,
    directionNavHide:true,
    controlNav:true,
    pauseOnHover:true,
    });
    });

  • Fernando Molinari
    23 mayo, 2011 a las 6:07

    que tal maestro.. mira te comento… puse todo lo que me decis pero no consiguo que funcione.. es decir.. lo previsualizo y se queda girando el gif sin cargar nada.
    te dejo mi codigo:

    Documento sin título

    $(window).load(function(sliceUpLeft) {
    $(‘#slider’).nivoSlider({
    animSpeed:500,
    pauseTime:3000,
    directionNav:true,
    directionNavHide:true,
    controlNav:true,
    pauseOnHover:true,
    });
    });

    This is an example of a HTML caption with a link.

  • Hola Kro, para manejar la velocidad tienes dos elementos:

    animSpeed:500,
    pauseTime:3000,
    

    No recuerdo bien pero seguramente el que precisas debe ser pauseTime.

    Saludos.

  • alguien sabe como cambiar la velocidad para que vaya más lento? por mas que le busco no doy bien con la opción. creo que tiene algo que ver con animSpeed….help!

  • Hola Eduardo, gracias por pasar por nuestro sitio. Me alegro de que te haya gustado la estética :)
    El problema que se te presenta a ti no es de programación, sino de estilo CSS.
    Lo arreglas de la siguiente manera:

    [php]<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" /> [/php]
    Ese es tu CSS, allí podrás darle estilo a las flechas para que no se vean como texto. Deberías poder agregar algun ícono, color, tamaño que desees.

    Si se te presenta algún otro problema nos avisas :) Saludos!

  • Buen dia. Solo para comentar que estoy tratando de usar su script pero, me salen 2 errores, cabe mencionar que entiendo bien la logica de programacion pero no le doy al error. Esto es lo que se visualiza en mi navegador, que por (cierto he probado con 4 nav. explorer,mozilla,zafari y crome), 1.- lsolo estou usando 4 imagenes y me salen numeradas 1234, en la esquina sup. derecha, y 2.- al pasar por la imagen las flechas de avance o retroceso salen como en texto.
    Pregunta: Que estoy haciendo mal..?? me podrian ayudar. He subido una pagina de ejemplo para que vean mi caso, de antemano gracias y saludos.
    http://www.grupo-cecs.com.mx/demos/nuevo.html
    pd: me gusto mucho la interfas de su sitio, felicidades.

  • Hola Milton, poniendo el siguiente código debería funcionarte como deseas:
    En el header.php
    [php]<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js&quot; type="text/javascript"></script>
    <script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>[/php]
    Luego en donde desees colocar el plugin:

    [php]<?php

    $numero = 1 ; // Número de imágenes que vas a utilizar
    $random = rand(1,$numero); //-No cambiar
    $img = array(); //Esto indica que utilizarás una imagen
    $url = array(); //Indica que cada imagen apuntará hacia un determinado lugar (enlace)
    $txt = array(); //El "alt" de la imagen es lo que aparece cuando uno se posiciona sobre la misma
    $title = array(); //Título de la imagen

    //De aquí en más colocas las imágenes y sus respectivos anexos

    $img[1] = " http://www.tusitio.com/images/1.jpg ";
    $url[1] = " http://www.tusitio.com/&quot;;
    $txt[1] = " Imagen 1";
    $title[1] = " Imagen 1";

    //Para agregar más simplemente cambias [1] por [2], [3], etc. Debe corresponder con el número superior ($numero = 3)

    //Llamar las imágenes en la div del slider

    echo "<div id=\"slider\">";
    echo "<a href=’$url[$random]’ target=’ _blank ‘><img src=’$img[$random]’ alt=’$txt[$random]’ title=’$title[$random]’ border=’ 0 ‘></a>";
    echo "</div>";

    ?>[/php]

    Finalmente, colocamos el script:
    [php]<script type="text/javascript">
    $(window).load(function() {
    $(‘#slider’).nivoSlider({
    effect:’random’,
    slices:15,
    animSpeed:500,
    pauseTime:3000,
    directionNav:true, //Next & Prev
    directionNavHide:true, //Only show on hover
    controlNav:true, //1,2,3…
    pauseOnHover:true, //Stop animation while hovering
    beforeChange: function(){},
    afterChange: function(){}
    });
    });
    </script>[/php]

    Espero que te sirva, cualquier consulta que tengas estamos a las órdenes ^^

  • Es un magnifico rotador de imagenes al igual que el Slideshow Floom http://nouincolor.com/floom/1.0/Demos/, pero queria hacerte una pregunta, hay alguna manera de implementar un codigo adicional y hacer que la imagenes se visualicen aleatoriamente…

    Slds.
    MMM

  • Hola Esther!

    Disculpa la demora en responderte!

    Fijate si tienes el ultimo jQuery cargado en tu blogger, si tienes otros plugins en jQuery o Mootools puede estar haciendo conflicto.
    Ademas de esto tienes que chequear que tengas la direccion de los archivos jQuery y CSS de Nivo Slider colocados correctamente en el header.

    Saludos!

  • jo, puse los quote a ver si salía todo el código, pero no sale

  • Hola Source, muchas gracias por tu respuesta, pero no consigo que funcione
    Esto lo he subido antes de

    [quote]

    $(window).load(function() {
    $(‘#slider’).nivoSlider
    ({effect:’random’,
    slices:15,
    animSpeed:500,
    pauseTime:3000,
    directionNav:true,
    directionNavHide:true,
    controlNav:true,
    beforeChange: function(){},
    afterChange: function(){}
    });
    });

    [/quote]

    Esto en el CSS

    [quote]
    /*–NIVO SLIDER–*/
    .nivo-slice {
    display:block;
    position:absolute;
    z-index:50;
    height:100%;
    }

    .nivo-caption {
    position:absolute;
    left:0px;
    bottom:0px;
    background:#000;
    color:#fff;
    opacity:0.8;
    width:100%;
    z-index:89;
    }
    .nivo-caption p {
    padding:5px;
    margin:0;
    }

    .nivo-directionNav a {
    position:absolute;
    top:45%;
    z-index:99;
    cursor:pointer;
    }
    .nivo-prevNav {
    left:0px;
    }
    .nivo-nextNav {
    right:0px;
    }

    .nivo-controlNav a {
    position:relative;
    z-index:99;
    cursor:pointer;
    }
    .nivo-controlNav a.active {
    font-weight:bold;
    }
    #slider {
    position:relative;
    }
    #slider img {
    position:absolute;
    top:0px;
    left:0px;
    }

    [/quote]

    Y esto en la entrada donde quiero poner el Slider

    [quote]




    [/quote]

  • Hola Esther, no creo que tengas problemas en colocar el Slider en blogger, para colocarlo solo sigue los pasos del tutorial :)

    Cualquier cosa nos consultas.

    Saludos!

  • Hola, me gustaría saber si se puede utilizar este slider en blogger, y si se puede, cómo se hace?

    Muchas gracias!

  • Hola Chris, el NivoSlider que esta en el post no es un plugin para wordpress pero lo puedes colocar manualmente en el código, sin embargo hay una versión para wordpress que la puedes descargar aquí, por lo que dice soporta hasta la versión 2.9 de wordpress pero lo han probado en 3.0.1 y ha funcionado.

    Saludos

  • Funciona en wp 3.0.1?

  • [php]<script type="text/javascript">
    $(window).load(function() {
    $(‘#slider’).nivoSlider({
    effect:’random’,
    slices:15,
    animSpeed:500,
    pauseTime:3000,
    directionNav:true, //Next & Prev
    directionNavHide:true, //Only show on hover
    controlNav:true, //1,2,3…
    pauseOnHover:true, //Stop animation while hovering
    beforeChange: function(){},
    afterChange: function(){}
    });
    });
    </script>[/php]

    Si haces todos los pasos que indicamos te queda genial el Slider, en esa porción del código se activan los botones de previo y siguiente.
    Saludos!!

  • Como se configura los botones de siguiente y anterior con consigo hacerlo HELP!!!!!!!!!!!!

  • Quedo cortada la pregunta, si quieres puedes preguntar de nuevo :)

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=""> <strike> <strong>