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.
开发者_JS百科 <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?
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
Also the order of the scripts apparently matter:
- jQuery JS file must be linked somewhere in your HTML file.
- Nivo Slider JS file must be linked AFTER the jQuery JS file.
- 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.
精彩评论