How to set various effects in nivo-slider

Question

I have a nivo slider on my site, but there are no effects besides slidesUp, although I set the default setting.

<div class="slider-wrapper theme-default"> <div class="ribbon"></div> <div id="slider" class="nivoSlider"> <img src="/upload/banners/image1.png" border="0" alt=""/> <img src="/upload/banners/image2.png" border="0" alt=""/> <img src="/upload/banners/image3.png" border="0" alt=""/> </div> </div> <script type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider(); }); </script> 

and in the title:

  <script type="text/javascript" src="/scripts/jquery.js"></script> <script type="text/javascript" src="/scripts/jquery.nivo.slider.pack.js"></script> <link rel="stylesheet" type="text/css" href="/css/nivo-slider.css"/> 

What to do to make it work correctly?

Answer 1

zeusakm. Check your code and find it:

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

You need to call the effect parameter, and then you can set it. How:

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

The effect parameter can be any of the following:

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

Full link: http://nivo.dev7studios.com/#usage

Answer 2

It seems that the order of the scripts matters:

• The jQuery JS file must be linked somewhere in your HTML file.
• The JS NIVO Slider file must be linked AFTER the JS jQuery file.
• Slider-specific controls (for example, effect: "fade") should be in the script tags AFTER the Jivo file of the Nivo Slider.

A lightweight desktop or an alternative that provides more control is to specify

 <img src="mypic.jpg" alt="" data-transition="fade"/> 

which also allows you to specify the effect on the image.