Comments on: How to Make Auto-Advancing Slideshows

By: Hiren Kansara

Hiren Kansara — Mon, 28 Jan 2013 14:55:21 +0000

Can we use other effect other than fadeIn & fadeOut ? I would like to use slideIn and slideOut effect. Also how can we deactivate auto rotating of images ?

By: ivo

ivo — Tue, 22 Jan 2013 23:25:51 +0000

i'm trying to slide divs with images and text(not only an image) , but the script stops. Is there a fix fro that ? Not neccassary to have the the overlay effect of the image change , only the fade

By: Lisa

Lisa — Tue, 11 Dec 2012 20:05:13 +0000

Thank you for this. I had been looking of a very simple transition and you nailed it. Keep up the fantastic work, and thanks for sharing.

By: Yuval

Yuval — Fri, 07 Dec 2012 19:45:00 +0000

This will also resume auto advancing after a 10 seconds.

$(window).load(function(){

	// The window.load event guarantees that
	// all the images are loaded before the
	// auto-advance begins.

	var timeOut = null;

	$('#slideshow .arrow').click(function(e,simulated){

		// The simulated parameter is set by the
		// trigger method.

		if(!simulated){

			// A real click occured. Cancel the
			// auto advance animation.

			clearTimeout(timeOut);
			timeOut = setTimeout(autoAdvance, 10000);
		}
	});

	// A self executing named function expression:
	
	function autoAdvance (){

		// Simulating a click on the next arrow.
		$('#slideshow .next').trigger('click',[true]);

		// Schedulling a time out in 5 seconds.
		timeOut = setTimeout(autoAdvance,5000);
	}

	autoAdvance();

});

By: Jen Barnes

Jen Barnes — Wed, 14 Nov 2012 23:16:09 +0000

Great easy script. How can I change the fade speed? Im looking for a gradual fade in and fade out of the images. - Im a jquery newbie. Thanks.

By: Jon

Jon — Wed, 10 Oct 2012 14:41:56 +0000

Love the script, been trying to work out how to make it so that the main image when clicked links to another page.

Anyone modded the script to do that?

By: Shera

Shera — Wed, 12 Sep 2012 07:36:13 +0000

Hi,

brilliant tutorial, thank you very much !!
I would like to know how I could change the arrows. I want to put another ones.

Thanks

By: Lori

Lori — Sat, 07 Jul 2012 19:24:38 +0000

Repeating a question above from "Max" and "dpm". As a jquery newbie, I don't quite understand this. How would I know what to change the selectors to?

“To use this script you just need to replace the selectors for the next arrow on line 28 and for both arrows on line 9. With these modifications you will be able to use this snippet to automate any slideshow (or any kind of presentation really) on your site by just including autoadvance.js with a script tag.”

I'm assuming that is why it's not functioning at all on the server but is on my local hard drive.

By: Steph

Steph — Fri, 15 Jun 2012 20:01:04 +0000

Hi, brilliant, thanks for the tutorial.... but I was wondering if there's a way to add captions to the slides? I'm no whizz kid at coding, so a simple explanation would be HUGELY appreciated.

Thanks.

By: Scott

Scott — Fri, 04 May 2012 15:48:11 +0000

I set up the non auto advance version of this awesome script and it worked like a charm across browsers and my iPhone. I then decided to also add the auto advance feature and now it is not working on my iPhone. Anyone have a similar issue? I have followed all directions and can't figure out what is going on?

Everything shows up correctly, but it will not advance either automatically OR when I click on the arrows?