How to add a timer slideshow in this slider jquery script?


I would like to know how can I add a timer function (like a slideshow) that will show each <li> content by 10 seconds and after will show the next and goes on...

Here is the slider function

Below follow the jQuery script that controls this component.

Thank you

// Creating the sweetPages jQuery plugin:
$.fn.sweetPages = function(opts){
	// If no options were passed, create an empty opts object
	if(!opts) opts = {};
	var resultsPerPage = opts.perPage || 3;
	// The plugin works best for unordered lists, althugh ols would do just as well:
	var ul = this;
	var li = ul.find('li');
		// Calculating the height of each li element, and storing it with the data method:
		var el = $(this);'height',el.outerHeight(true));
	// Calculating the total number of pages:
	var pagesNumber = Math.ceil(li.length/resultsPerPage);
	// If the pages are less than two, do nothing:
	if(pagesNumber<2) return this;

	// Creating the controls div:
	var swControls = $('<div class="swControls">');
	for(var i=0;i<pagesNumber;i++)
		// Slice a portion of the lis, and wrap it in a swPage div:
		li.slice(i*resultsPerPage,(i+1)*resultsPerPage).wrapAll('<div class="swPage" />');
		// Adding a link to the swControls div:
		swControls.append('<a href="" class="swShowPage">'+(i+1)+'</a>');

	var maxHeight = 0;
	var totalWidth = 0;
	var swPage = ul.find('.swPage');
		// Looping through all the newly created pages:
		var elem = $(this);

		var tmpHeight = 0;

			maxHeight = tmpHeight;

	swPage.wrapAll('<div class="swSlider" />');
	// Setting the height of the ul to the height of the tallest page:
	var swSlider = ul.find('.swSlider');
	swSlider.append('<div class="clear" />').width(totalWidth);

	var hyperLinks = ul.find('a.swShowPage');{
		// If one of the control links is clicked, slide the swSlider div 
		// (which contains all the pages) and mark it as active:

	// Mark the first link as active the first time this code runs:
	// Center the control div:
	return this;

	/* The following code is executed once the DOM is loaded */
	// Calling the jQuery plugin and splitting the
	// #holder UL into pages of 3 LIs each:
	// The default behaviour of the plugin is to insert the 
	// page links in the ul, but we need them in the main container:

	var controls = $('.swControls').detach();

Open in new window

Who is Participating?
McNeticConnect With a Mentor Commented:
After this line:

Open in new window

try adding the following:

var slideTimer = function() {
  var activePage = ul.find('');
  var nextPage;

	if (0 < {
		nextPage =;
	} else {
	  nextPage = activePage.siblings().first();

	setTimeout(slideTimer, 10000);
setTimeout(slideTimer, 10000);

Open in new window

marcoloppoAuthor Commented:

Thank you for your answer. I added the code lines above as you asked, but unfortunately it did not work as you can see

Can u see what's happening?

McNeticConnect With a Mentor Commented:
Sorry for that. Try replacing the second line by:

var activePage = $('div.swControls');

Open in new window

marcoloppoAuthor Commented:
Perfect solution, thank you.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.