Como Implementar Nivo Slider en tu Página Web

Josue Ochoa

hace 12 años

A la fecha de este tutorial la versión de Nivo Slider es la 3.2 y la de jQuery es 1.9.1

Nivo Slider es sino el mas popular, uno de los plugins de jQuery de transición de imágenes mas conocido y propagado en la red, en este tutorial te enseñare los pasos necesarios para implementar Nivo en tu página Web.

Preparando el entorno

Para el ejemplo usaremos un entorno como el de la imagen, donde tenemos un documento .html, una carpeta para los .css, una para los .js y una carpeta de imágenes, aqui habrán 4 imágenes de ejemplo (slide1.jpg, slide2.jpg…).

Ahora procedemos a descargar Nivo desde su sitio oficial, al descomprimir el .zip obtendremos una lista de ficheros/carpetas, seleccionamos los siguientes:

Los copiamos a la carpeta donde donde esta nuestra página Web, ubicamos cada fichero en su carpeta correspondiente (js > /js y css > /css), la carpeta ‘themes’ la dejamos en la raiz.

Nota: Puedes optar por copiar la versión comprimida de Nivo (jquery.nivo.slider.pack.js), pero para el ejemplo usaremos la versión completa para poder usarla de referencia.

Estructura HTML

Ahora abrimos el documento HTML donde irá el slider y empezamos con una estructura básica:

<!doctype html> 
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Ejemplo Nivo</title>
   </head>
   <body> </body>
</html>

Dentro del <head> incluimos los archivos CSS y al final (antes de cerrar el </body>) los JS de Nivo y jQuery, este ultimo lo obtenemos mediante el CDN de Google (si prefieres puedes bajarte jQuery e incluirlo de forma local).

<!doctype html> 
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Ejemplo Nivo</title>
      <link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen" />
   </head>
   <body>
      <!-- Aqui irá el slider -->   
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>   
      <script src="js/jquery.nivo.slider.js" type="text/javascript"></script> 
   </body>
</html>

Ahora creamos el contenedor para nuestro Slider, este llevará la clase ‘slider-wrapper’ (es muy importante mantener estos nombres de clases ya que esto nos servirá para trabajar con los themes), dentro otro div con id de ‘slider’ y clase de ‘nivoSlider’ y por último, dentro de este, las imágenes:

<div class="slider-wrapper">
   <div id="slider" class="nivoSlider">
    <img src="img/slide1.jpg" />
    <img src="img/slide2.jpg" />
    <img src="img/slide3.jpg" />
    <img src="img/slide4.jpg" />
   </div>
</div>

Al final (antes de cerrar el </body>) abrimos un <script> donde vamos a:

1. Envolver todo en: $(window).load(function(){ … }), esto hace que Nivo sólo se ejecute cuando la página y las imágenes hayan terminado de cargar.
2. Seleccionar al slider mediante id: $(‘#slider’)
3. Ejecutar la función nivoSlider sin ningún parámetro: .nivoSlider();

<script type="text/javascript" type="text/javascript">         
    $(window).load(function(){           
        $('#slider').nivoSlider();         
    });     
</script>

Ahora si probamos esta página en el navegador ya deberiamos ver el slider funcionando:

Sin embargo el slider tiene un problema: por defecto ocupa todo el espacio disponible (width: 100%), esto lo arreglaremos con CSS, abrimos una etiqueta <style> (lo recomendable es hacerlo en tu propia hoja de estilos), seleccionamos al div contenedor (.slider-wrapper), le definimos un ancho fijo y lo centramos, asi el ancho del slider sera 100% de 960px.

<style>
    .slider-wrapper{
        width: 960px;
        margin: 100px auto;
    } 
</style>

Themes

Ahora ya lo tenemos centrado y funcionando, pero no se ve tan bien, y esto es debido a que estamos usando Nivo en su estado mas elemental, si os acordaís al principio, copiamos tambien la carpeta /themes, allí es donde estan los CSS e imágenes que le dan la apariencia a Nivo.

Para usar los themes primero tenemos que incluirlos, esto es bastante sencillo, solo llamamos el .css principal de cada theme mediante la etiqueta <link> como cualquier otra hoja de estilos:

<!doctype html> 
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Ejemplo Nivo</title>
      <link rel="stylesheet" href="themes/default/default.css" type="text/css" media="screen" />
      <link rel="stylesheet" href="themes/light/light.css" type="text/css" media="screen" />
      <link rel="stylesheet" href="themes/dark/dark.css" type="text/css" media="screen" />
      <link rel="stylesheet" href="themes/bar/bar.css" type="text/css" media="screen" />
      <link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen" />

Nota: no es recomendable incluir todos los themes todo el tiempo, prueba cada uno y cuando elijas el que quieras borra el resto.

Ahora lo único que tienes que hacer es definir el theme que quieras usar, esto se hace añadiendo la clase correspondiente al div contenedor, por ejemplo si queremos usar el theme ‘light’ simplemente le ponemos la clase ‘theme-light’ al div contenedor (.slider-wrapper):

<div class="slider-wrapper theme-light">
<div id="slider" class="nivoSlider">

Parámetros de nivoSlider()

Nivo funciona perfectamente sin ningun parámetro, sin embargo si quieres tener un poco mas de control sobre el slider puedes modificarlo a tus necesidades mediante las opciones que nos brinda:

$('#slider').nivoSlider({
	effect: 'random',
	slices: 15,
	boxCols: 8,
	boxRows: 4,
	animSpeed: 500,
	pauseTime: 3000,
	startSlide: 0,
	directionNav: true,
	controlNav: true,
	controlNavThumbs: false,
	pauseOnHover: true,
	manualAdvance: false,
	prevText: 'Prev',
	nextText: 'Next',
	randomStart: false,
});

Los valores definidos en el codigo de arriba son los parametros por defecto, a continuación listare cada uno de estos, que tipo de valor acepta y para que sirve.

effect: texto, define el tipo de animación del transición, puede ser: sliceDown, sliceDownLeft, sliceUp, sliceUpLeft, sliceUpDown, sliceUpDownLeft, fold, fade, random, slideInRight, slideInLeft, boxRandom, boxRain, boxRainReverse, boxRainGrow, boxRainGrowReverse
slices: numero, define el numero de ‘slices’ o cortes para el tipo de animación ‘slice’.
boxCols: numero, el numero de columnas para el tipo de animación ‘box’
boxRows: numero, el numero de filas para el tipo de animación ‘box’
animSpeed: numero (milisegundos), la velocidad de la animación
pauseTime: numero (milisegundos), el tiempo de pausa entre transición y transición
startSlide: numero, esto define con que imagen empieza el slider, empezando por el 0
directionNav: true/false, define si aparecen o no las flechas de anterior/siguiente.
controlNav: true/false, define si aparece o no la navegación numerica de abajo
controlNavThumbs: true/false, este parámetro solo tiene efecto si ‘controlNav’ esta activado, si le pones true a este, lo que hara es reemplazar a la navegación numerica por una navegación de miniaturas, pero para que funcionen las miniaturas es necesario asignarle el atributo ‘data-thumb’ e indicarle que miniatura utilizar en cada una de las imágenes, por ejemplo: <img src=img/slider1.jpg data-thumb=img/slider1_thumb.jpg />
pauseOnHover: true/false, define si al pasar el cursor sobre el slider este se detiene o no.
manualAdvance: true/false, define si el slider tiene avance manual o automático, por defecto este parámetro es false (avance automático).
prevText: texto, el texto del boton para ir a la imagen anterior, no tiene efecto si es que usas uno de los themes ya que este es reemplazado por una imagen
nextText: texto, el texto del boton para ir a la imagen siguiente, igual que el parámetro anterior, si usas un theme no habra mucho cambio.
randomStart: true/false, si le pones true; la primera imagen del slider será aleatoria (si este parámetro es true, anula ‘startSlide’).

Captions

Se le conoce ‘caption’ (la traducción literal es subtitulo) al texto acompañante de cada imagen del slider, pueden ser texto simple o HTML. Para definir un caption lo hacemos usando el atributo ‘title’ de la imagen, hay dos formas de hacerlo:

Directamente
La forma mas simple de hacerlo:

<img src="img/slide1.jpg" title="Hola mundo" />

Tambien podemos pasarle HTML:

<img src="img/slide1.jpg" title="<p>esto es codigo HTML.</p>" />

Externamente
Este método es útil cuando queremos usar captions complejos con alto contenido HTML y no queremos tener la limitación de trabajarlo en una sola linea, la idea es hacer el caption libremente en otro lado y luego, en el slider hacerle referencia mediante el id que le definamos, por ejemplo digamos que tenemos un caption con un id de ‘caption1’:

<div id="caption1">
   <h3>Hola, esto es un caption HTML</h3>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti, quos, perspiciatis maiores saepe sit quidem quisquam cumque voluptas similique magni distinctio enim fugiat blanditiis qui esse. Ea, accusantium ipsa odio?</p>
   <ul>
      <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus, eveniet.</li>
      <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, dolorum?</li>
   </ul>
</div>

Luego, en la imagen del slider que queramos que tenga este caption simplemente lo llamamos mediante atributo title ‘#caption1’:

<img src="img/slide1.jpg" title="#caption1" />

Código Final

<!doctype html> 
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Ejemplo Nivo</title>
      <link rel="stylesheet" href="themes/default/default.css" type="text/css" media="screen" />
      <link rel="stylesheet" href="themes/light/light.css" type="text/css" media="screen" />
      <link rel="stylesheet" href="themes/dark/dark.css" type="text/css" media="screen" />
      <link rel="stylesheet" href="themes/bar/bar.css" type="text/css" media="screen" />
      <link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen" />
      <style>         
        .slider-wrapper{
            width: 960px;
            margin: 100px auto;
        }
      </style>
   </head>
   <body>
      <div class="slider-wrapper theme-light">
         <div id="slider" class="nivoSlider">             
            <img src="img/slide1.jpg" title="<p>Esto es un codigo HTML</p>" />
            <img src="img/slide2.jpg" title="#caption1" />
            <img src="img/slide3.jpg" />
            <img src="img/slide4.jpg" />
        </div>
        <div id="caption1" style="display: none;">
            <h3>Hola, esto es un caption HTML</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti, quos, perspiciatis maiores saepe sit quidem quisquam cumque voluptas similique magni distinctio enim fugiat blanditiis qui esse. Ea, accusantium ipsa odio?</p>
            <ul>
               <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus, eveniet.</li>
               <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, dolorum?</li>
            </ul>
         </div>
      </div>
      <script src="js/jquery.min.js" type="text/javascript"></script>     
      <script src="js/jquery.nivo.slider.js" type="text/javascript"></script>
      <script type="text/javascript">
        $('#slider').nivoSlider({
            effect: 'random',
            slices: 15,
            boxCols: 8,
            boxRows: 4,
            animSpeed: 500,
            pauseTime: 3000,
            startSlide: 0,
            directionNav: true,
            controlNav: true,
            controlNavThumbs: false,
            pauseOnHover: true,
            manualAdvance: false,
            prevText: 'Prev',
            nextText: 'Next',
            randomStart: false,
        });
      </script> 
   </body>
</html>

Si tienes alguna duda hazmela saber en los comentarios, puedes probar el ejemplo de este tutorial en esta dirección o bajarte el código fuente de esta otra.