Configuration of the Nivo slider

The slider or speedboat of contents has become a habitual one of the webpages, almost always in the main page of the site, it offers a showy way to us to place images or messages related to the subject of our Web that are changing or sliding.

One of the slider lightest and configurable than Slider exists is nivo, once you have implemented it in your webpage, is an article here of how to add nivo slider to WordPress, you will be asking yourself as they are the options of configuration of this slider. We see.

to form slider nivo

The most basic call to the speedboat of images is this (it loads the values by defect):


<script type=€ text/Javascript€ >

    $ (window) .load (function () \ {

        $ (€˜to #nivoslider€™) to.nivoSlider ();

    });

</script>

A complete call, with all the options of nivo slider is thus (It is not necessary to write all the options only those that we want to modify):


<script type=€ text/Javascript€ >


$ (window) .load (function () \ {


  $ (€˜to #slider€™) to.nivoSlider (\ {


        effect: €˜random€™,    //Type of effect: €˜fold, fade, sliceDown€™
        slices: 15,    //Number of slices for the effect slice.
        boxCols: 8,    //Number horizontal of boxes in the way box
        boxRows: 4,    //vertical Number of boxes in the way box
        animSpeed: 500,     //Speed of the animation
        pauseTime: 3000,    //Duration of each image in screen
        startSlide: 0,     //First image to show (0 first)
        directionNav: true,    //Navigation with labels Next and Prev
        controlNav: true,    //Navigation with numbers 1.2.3,€¦
        controlNavThumbs: false,    //Miniatures of navigation
        to pauseOnHover: true,     //To stop animation when being above
        manualAdvance: false,    //Advance manual of images
        prevText: €˜Prev€™,     //Text of the Prev label
        nextText: €˜Next€™,     //Text of the Next label
        randomStart: false,     //To begin in random image
        beforeChange: function () \ {},    //Action before the transition
        afterChange: function () \ {},    //Action after the transition
        slideshowEnd: function () \ {},     //Action after showing all the images
        lastSlide: function () \ {},     //Action after last image
        afterLoad: function () \ {}     //Action when the slider has been loaded
  });

});

</script>

The effects that the speedboat in its field admits effect are the following:

  • sliceDown
  • sliceDownLeft
  • sliceUp
  • sliceUpLeft
  • sliceUpDown
  • sliceUpDownLeft
  • fold
  • fade
  • random
  • slideInRight
  • slideInLeft
  • boxRandom
  • boxRain
  • to boxRainRever itself
  • boxRainGrow
  • to boxRainGrowRever itself

2 commentaries in €œConfiguration of the Nivo slider€

  1. Hello, thanks for the explanations. I have a question. Upon the image, any text can be put after title=€€¦.€/>, but has very black shading, that covers much the image that appears underneath. It would like to know how how to be able to change me this shading of the text, to change it for example to a clear gray, so that the image of underneath is distinguished more.
    GRACIAS

  2. Hello he would want to know if they could help me, I want to move the points of navigation of the slider by defect estan in the part inferior and I want that they aparescan the part of above of the slider

He lets a commentary