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 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!