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