Configuración del slider Nivo

El slider o deslizador de contenidos se ha convertido en un habitual de las páginas web, casi siempre en la página principal del sitio, nos ofrece una manera vistosa de colocar imágenes o mensajes relacionados con el tema de nuestra web que van cambiando o deslizándose.

Uno de los slider más livianos y configurables que existen es el nivo Slider, una vez lo hayas implementado en tu página web, aquí hay un artículo de como añadir el nivo slider a WordPress, te estarás preguntando cuales son las opciones de configuración de este slider. Veamos.

La llamada más básica al deslizador de imágenes es esta ( carga los valores por defecto):

<script type=»text/javascript»>
    $(window).load(function() {
        $(‘#nivoslider’).nivoSlider();
    });
</script>

Una llamada completa, con todas las opciones de nivo slider es así (No hace falta escribir todas las opciones sólo las que queramos modificar):

<script type=»text/javascript»>

$(window).load(function() {

  $(‘#slider’).nivoSlider({

        effect: ‘random’,    // Tipo de efecto: ‘fold,fade,sliceDown’
        slices: 15,    // Número de de rebanadas para el efecto slice.
        boxCols: 8,    // Número horizontal de cajas en el modo box
        boxRows: 4,    // Número vertical de cajas en el modo box
        animSpeed: 500,     // Velocidad de la animación
        pauseTime: 3000,    // Duración de cada imagen en pantalla
        startSlide: 0,     // Primera imagen a mostrar (0 primera)
        directionNav: true,    // Navegación con etiquetas Next y Prev
        controlNav: true,    // Navegación con números 1,2,3,…
        controlNavThumbs: false,    // Miniaturas de navegación
        pauseOnHover: true,     // Parar animación al estar encima
        manualAdvance: false,    // Avance manual de imágenes
        prevText: ‘Prev’,     // Texto de la etiqueta Prev
        nextText: ‘Next’,     // Texto de la etiqueta Next
        randomStart: false,     // Empezar en imagen aleatoria
        beforeChange: function(){  },    // Acciones antes de la transición
        afterChange: function()  {  },    // Acciones después de la transición
        slideshowEnd: function()  {  },     // Acciones depués de mostrar todas las imágenes
        lastSlide: function()  {  },     // Acciones después de última imagen
        afterLoad: function()  {  }     // Acciones cuando se haya cargado el slider
  });

});

</script>

Los efectos que admite el deslizador en su campo effect son los siguientes:

• sliceDown
• sliceDownLeft
• sliceUp
• sliceUpLeft
• sliceUpDown
• sliceUpDownLeft
• fold
• fade
• random
• slideInRight
• slideInLeft
• boxRandom
• boxRain
• boxRainReverse
• boxRainGrow
• boxRainGrowReverse