CODEWITHSUNDEEP
jquerybuttonslideshow
Margate
Margate

Reputation: 421

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();
}
);

Upvotes: 0

Views: 1027

Answers (2)

Raunak Kathuria
Raunak Kathuria

Reputation: 3225

In your js initialize the following variable

Current

sliderint=1;
sliderNext=2;

update it to

var sliderint=1;
var sliderNext=2;

and make sliderint consistent it is sliderint and sliderInt at other place

Check http://jsfiddle.net/raunakkathuria/QB7W9/1/

Upvotes: 1

Anirudh Sethi
Anirudh Sethi

Reputation: 56

original initialization

sliderint=1;

change it to

sliderInt=1;

And it would work

Upvotes: 4

Related Questions