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 pletely 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=".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 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>

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!

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 pletely 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./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 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>

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!

• javascript
• image
• slider
• slideshow
• nivo-slider

2 Answers 2

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