Changing the duration of a slide in slideshow

Hi,

I have followed a youtbue tutorial on creating an automatic slideshow using javascript, this slideshow works perfectly on the web page www.neverup-neverin.com

If someone could help me with the following I’d be very grateful:

  1. I want to keep each slide on the screen for a longer amount of time, say 7 seconds. I have tried editing the “3000” time frame in the js but it doesn’t seem to make any changes? :frowning:

  2. Want to be able to let the user flick left and right, I can’t seem to see the arrows, or “previous” and “next” text to allow the user to do this.

I would paste the javascript code and css code in here but it would clog up the page, still haven’t worked out how to do that fancy thing where the code is displayed in a scrollbar window! Newbie to all this :rolleyes:

Thanks in advance

question 1:

The “3000” is given in millisec., so it’s 3 sec. - Tested: if you change it in 7000 or more, the slides will stay longer.

I have tried changing this, my code look likes so, and t still only stays on the screen for 3 seconds

// JavaScript Document

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

That is strange.
If I do the same, it’s working:

Did you upload the new slider.js, and refresh your browser after that (and empty the browser cache)?

=======
question 2

The Previous and Next buttons are placed under the slider container, but cut off by the overflow: hidden; of the #slider.
You can change it in overflow: visible; and there they are. :slight_smile:

Then you can remove the #slider a {margin-top: 30px;} to get them right under the slider.
And change the height of the .slideshow in 290px, to get the following elements under the buttons.

Hey, apologies I thought I had replied to this the other day.

It was my simple mistake of not uploading the JS file, thanks for the help