开发者

Nivo Slider just not working properly

Ok so this is my first try with the Nivo Slider. My slider is stuck on photo number 4, it doesn't slide at all. I'm almost completely lost as to how to call the bullet navigation at the bottom. This is my code;

Stylesheet in HEAD:

<link href="nivo-slider.css" rel="stylesheet" type="text/css" />

Nivo Slider div on page:

<div id="nivo_slider">
     <div id="slider" class="nivoSlider">
           <img src="images/slideshow/1.jpg" width="791" height="254" />
           <img src="images/slideshow/5.jpg" width="791" height="254" />
           <img src="images/slideshow/3.jpg" width="791" height="254" />
           <img src="images/slideshow/2.jpg" width="791" height="254" />
           <img src="images/slideshow/4.jpg" width="791" height="254" />
     </div>
</div>

JavaScript at bottom of page:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="scripts/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider();
        effect:'fade', // Specify sets like: 'fold,fade,sliceDown'
        animSpeed:500, // Slide transition speed
        pauseTime:3000, // How long each slide 开发者_如何学Gowill show
        startSlide:0, // Set starting Slide (0 index)
        directionNav:true, // Next & Prev navigation
        directionNavHide:true, // Only show on hover
        controlNav:true, // 1,2,3... navigation
        controlNavThumbs:false, // Use thumbnails for Control Nav
        controlNavThumbsFromRel:false, // Use image rel for thumbs
        controlNavThumbsSearch: '.jpg', // Replace this with...
        controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
        keyboardNav:true, // Use left & right arrows
        pauseOnHover:false, // Stop animation while hovering
        manualAdvance:false, // Force manual transitions
        captionOpacity:0.8, // Universal caption opacity
        prevText: 'Prev', // Prev directionNav text
        nextText: 'Next', // Next directionNav text
});
</script>

Here's my CSS:

#nivo_slider { 
        width:791px; 
        height:254px; 
        float:left; 
        margin-left:46px; 
        padding:8px; 
        background:#e6e5e5; 
        border:solid 1px #d1d1d1;
}
#slider { 
        float:left; 
        width:791px; 
        position:relative; 
        background:url(images/loading.gif) no-repeat 50% 50%; 
}
#slider img {
        position:absolute;
        top:0px;
        left:0px;
        display:block;
}
.nivo-controlNav {
        position:absolute;
        left:260px;
        bottom:-42px;
}
.nivo-controlNav a {
        display:block;
        width:22px;
        height:22px;
        background:url(images/bullets.png) no-repeat;
        text-indent:-9999px;
        border:0;
        margin-right:3px;
        float:left;
}
.nivo-controlNav a.active {
        background-position:0 -22px;
}

I've gone over and over the demos and the support page from Dev7 but I'm totally lost. Any help would be wonderful!


You've got a syntax error should be

<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider({
        effect:'fade', // Specify sets like: 'fold,fade,sliceDown'
        animSpeed:500, // Slide transition speed
        pauseTime:3000, // How long each slide will show
        startSlide:0, // Set starting Slide (0 index)
        directionNav:true, // Next & Prev navigation
        directionNavHide:true, // Only show on hover
        controlNav:true, // 1,2,3... navigation
        controlNavThumbs:false, // Use thumbnails for Control Nav
        controlNavThumbsFromRel:false, // Use image rel for thumbs
        controlNavThumbsSearch: '.jpg', // Replace this with...
        controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
        keyboardNav:true, // Use left & right arrows
        pauseOnHover:false, // Stop animation while hovering
        manualAdvance:false, // Force manual transitions
        captionOpacity:0.8, // Universal caption opacity
        prevText: 'Prev', // Prev directionNav text
        nextText: 'Next' // Next directionNav text
     });
});
</script>


I think you forgot to put this code after the Nivo Slider div on page:

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

This loads it up

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜