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.

configurar slider nivo

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

2 comentarios en “Configuración del slider Nivo”

  1. Hola, gracias por las explicaciones. Tengo una pregunta. Encima de la imagen, se puede poner cualquier texto tras title=»….»/>, pero tiene un sombreado muy negro, que tapa mucho la imagen que aparece debajo. Me gustaría saber cómo poder cambiar este sombreado del texto, para cambiarlo por ejemplo a un gris claro, para que se distinga la imagen de debajo más.
    GRACIAS

  2. Hola quisiera saber si me pudieran ayudar, quiero mover los puntos de navegacion del slider por defecto estan en la parte inferior y yo quiero que aparescan el la parte de arriba del slider

Deja un comentario