CODEWITHSUNDEEP
javascriptplugins
Arthur Kushman
Arthur Kushman

Reputation: 3609

How to set different effects in nivo-slider

I've got a nivo-slider on my site, but there aren't any effects except slidesUp, even though I have set the default installation.

         <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 header:

    <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 should I do to make it works properly?

Upvotes: 6

Views: 60211

Answers (2)

John
John

Reputation: 41

Also the order of the scripts apparently matter:

  1. jQuery JS file must be linked somewhere in your HTML file.
  2. Nivo Slider JS file must be linked AFTER the jQuery JS file.
  3. Slider-specific controls (such as "effect:'fade'") must be in script tags AFTER the Nivo Slider JS file.

An easy worksround or alternative providing more control is to specify 

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

which also lets you specify the effect per picture.

Upvotes: 3

Carlos
Carlos

Reputation: 346

zeusakm. Check your code and look for this:

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

You have to call the 'effect' option 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
  • fold
  • fade
  • random
  • slideInRight
  • slideInLeft
  • boxRandom
  • boxRain
  • boxRainReverse
  • boxRainGrow
  • boxRainGrowReverse

Complete reference: http://nivo.dev7studios.com/#usage

Upvotes: 32

Related Questions