I’m not sure if this is a Javascript or a CSS issue, but I’m running into trouble with the Nivo Slider, which uses the jQuery library: http://nivo.dev7studios.com/
If you click the right arrow, after about three clicks, it gets stuck and won’t scroll to the right anymore. I widened the controlnav div, thinking that would help, but it doesn’t do anything. Any thoughts as to what may be making it malfunction?
I’m not good with JS, but I notice in the last script in the head of you document, there is this:
afterChange: function(){
if ($(".nivo-control[rel='0']").hasClass("active")) {$('.nivo-controlNav a').animate({left:"0px"},250);}
else if ($(".nivo-control[rel='1']").hasClass("active")) {$('.nivo-controlNav a').animate({left:"0px"},250);}
else if ($(".nivo-control[rel='2']").hasClass("active")) {$('.nivo-controlNav a').animate({left:"0px"},250);}
else if ($(".nivo-control[rel='3']").hasClass("active")) {$('.nivo-controlNav a').animate({left:"-160px"},250);}
else if ($(".nivo-control[rel='4']").hasClass("active")) {$('.nivo-controlNav a').animate({left:"-320px"},250);}
else if ($(".nivo-control[rel='5']").hasClass("active")) {$('.nivo-controlNav a').animate({left:"-480px"},250);}
else if ($(".nivo-control[rel='6']").hasClass("active")) {$('.nivo-controlNav a').animate({left:"-640px"},250);}
else if ($(".nivo-control[rel='7']").hasClass("active")) {$('.nivo-controlNav a').animate({left:"-800px"},250);}
else if ($(".nivo-control[rel='8']").hasClass("active")) {$('.nivo-controlNav a').animate({left:"-960px"},250);}
else if ($(".nivo-control[rel='9']").hasClass("active")) {$('.nivo-controlNav a').animate({left:"-1120px"},250);}
else if ($(".nivo-control[rel='10']").hasClass("active")) {$('.nivo-controlNav a').animate({left:"-[COLOR="#FF0000"]1120px[/COLOR]"},250);}
else if ($(".nivo-control[rel='11']").hasClass("active")) {$('.nivo-controlNav a').animate({left:"-[COLOR="#FF0000"]1120px[/COLOR]"},250);}
},
Notice those last two values in red. They perhaps should increment like all the previous ones. Actually, the first few are just zero too. However, once the script gets to the last image, it seems to get stuck there. So something more is needed here. But it’s certainly a JS issue.
I’m also thinking that I need to increase the number of rel items. I took this Javascript code from one of the nivo slider posters who suggest people use his code for implementing the slider with thumbnails below and I think his slideshow only had 11 images. Mine has 31. I’ll mess with it and see what happens.
Ralph, thanks to your nudging me in the right direction, I’ve figured it out! I’m now able to control these elements in the slider. Now I just need to perfect it so that the thumbnails don’t get cut but that has nothing to do with JS.
This is what I meant, when you click on the right arrow, especially as you scroll through further along, the thumbnails get cut off. I just need to get the left adjustment right so that it doesn’t do that.
O, I see. Well, what you need to do is tell the script how far to slide each time you click an arrow. At the moment, it’s set to move 160px each time the arrow is clicked:
$('.nivo-controlNav_right').click(function(){
var pos=Number($('.nivo-controlNav a').css("left").replace("px",""));
if (pos>-2250) {$('.nivo-controlNav a').animate({left:"-=[COLOR="#FF0000"]160px[/COLOR]"},250, function(){$('.nivo-controlNav a').clearQueue();} );}
});
$('.nivo-controlNav_left').click(function(){
var pos=Number($('.nivo-controlNav a').css("left").replace("px",""));
if (pos<-10){$('.nivo-controlNav a').animate({left:"+=[COLOR="#FF0000"]160px[/COLOR]"},250, function(){$('.nivo-controlNav a').clearQueue();} );}
});
The images are 180x wide, but they have 17 px of right margin too, so you should change those values from 160px to, say, 177px, or perhaps 194px (see which works best).
