Margate Margate - 5 months ago 32
jQuery Question

JQuery slider next / previous buttons not working on the first image?

I have a jQuery slide show with a previous and next button and it works ok BUT! When the page first loads and the buttons are pressed nothing happens! The buttons work on every other image in the slide show but not on the first image when the page is loaded / refreshed? I am not very good at jQuery and would appreciate any help at all...

I made a fiddle but the buttons are not working at all in the fiddle! You can however view the code and perhaps find this bug: jsfiddle.net/Margate/QB7W9/

Here is a link to the offending page where everything runs (except for the buttons on the 1st image!): http://www.darrenmorton.com/example/index.html

Thank you in advance for any help,

Margate : )

sliderint=1;
sliderNext=2;

$(document).ready(function(){
$("#slider>img#1").fadeIn(300);
startSlider();
});

function startSlider(){
count=$("#slider>img").size();

loop=setInterval(function(){

if(sliderNext>count){
sliderNext=1;
sliderInt=1;
}

$("#slider>img").fadeOut(300);
$("#slider>img#" + sliderNext).fadeIn(300);

sliderInt=sliderNext;
sliderNext=sliderNext+1

},15000)
}

function prev(){
newSlide=sliderInt-1;
showSlide(newSlide);
}

function next(){
newSlide=sliderInt+1;
showSlide(newSlide);
}


function stopLoop(){
window.clearInterval(loop);
}

function showSlide(id){
stopLoop();
if(id>count){
id=1;
}else if(id<1){
id=count;
}

$("#slider>img").fadeOut(300);
$("#slider>img#" + id).fadeIn(300);

sliderInt=id;
sliderNext=id+1;
startSlider();
}

$("#slider>img").hover(
function (){
stopLoop();
},
function(){
startSlider();
}
);

Answer

original initialization

sliderint=1;

change it to

sliderInt=1;

And it would work