change initiate time of slider

Hello, I would like to build a navigation with 6 sublinks, each of them are images. The image of the sublink is supposed to change as in an autoplay slider every few seconds before starting again. At the moment I use two sliders, to create the effect based on a code I've found here. However I would like the second slider changing the image 5 seconds after the first slider has changed, so that the two sliders will never change the image at the same time.

Thanks for your help,

Regards,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
#menu-slider { float:left; }
/* Required */
#list-images, #list-images li { height: 298px; width: 730px; display: block; }
#list-images { float: left; overflow: hidden; /* Required to hide the inactive slides */ padding:0px; }
#list-images li { position: relative; }
#list-images li img { background: #fff; position: absolute; top: 0; left: 0; }
/* Image captions */
#list-links { width: 238px; float:left; list-style: none; padding:0px; }
#list-links li a { color: #333; background:#f00; padding: 17px 12px 17px 16px; border-bottom: 1px solid #ccc; font-weight: bold; font-size: 13px; display: block; cursor:pointer; }
#list-links li.hover { background: #000; }
#list-links li.hover a, #list-links li.hover a:hover { color: #fff; background: none; border-bottom: none; }
#list-links li.last a { border-bottom: none; }
.wrap { width: 100%; float:left; }
#pagewrap { width:1000px; margin:0 auto; }
#list-images1, #list-images1 li { height: 298px; width: 730px; display: block; }
#list-images1 { float: left; overflow: hidden; /* Required to hide the inactive slides */ padding:0px; }
#list-images1 li { position: relative; }
#list-images1 li img { background: #fff; position: absolute; top: 0; left: 0; }
/* Image captions */
#list-linksm1 { width: 238px; float:left; list-style: none; padding:0px; }
#list-linksm1 li a { color: #333; background:#f00; padding: 17px 12px 17px 16px; border-bottom: 1px solid #ccc; font-weight: bold; font-size: 13px; display: block; cursor:pointer; }
#list-linksm1 li.hover { background: #000; }
#list-linksm1 li.hover a, #list-linksm1 li.hover a:hover { color: #fff; background: none; border-bottom: none; }
#list-linksm1 li.last a { border-bottom: none; }
.wrap { width: 100%; float:left; }
</style>
<script type="text/JavaScript">
$(document).ready(function() {
// Declare variables
var width = 730;
var slides = $('#list-images1 li');
var numSlides = slides.length;
// Wrap the slides & set the wrap width - this will be used to animate the slider left/right
slides.wrapAll('<div id="slide-wrap1"></div>').css({'float' : 'left','width' : width});
$('#slide-wrap1').css({width: width * numSlides});
// Hover function - animate the slides based on index of links
$('#list-linksm1 li a').click(function(){
$('#list-linksm1 li').removeClass('hover');
var i = $(this).index('#list-linksm1 li a');
$(this).parent().addClass('hover');
$('#slide-wrap1').stop().animate({'marginLeft' : width*(-i)});
});
setInterval(function(){
$('#list-linksm1 li.hover').next().find('a').trigger('click');
}, 3000);
});
</script>
<script type="text/JavaScript">
$(document).ready(function() {
// Declare variables
var width = 730;
var slides = $('#list-images li');
var numSlides = slides.length;
// Wrap the slides & set the wrap width - this will be used to animate the slider left/right
slides.wrapAll('<div id="slide-wrap"></div>').css({'float' : 'left','width' : width});
$('#slide-wrap').css({width: width * numSlides});
// Hover function - animate the slides based on index of links
$('#list-links li a').click(function(){
$('#list-links li').removeClass('hover');
var i = $(this).index('#list-links li a');
$(this).parent().addClass('hover');
$('#slide-wrap').stop().animate({'marginLeft' : width*(-i)});
});
setInterval(function(){
$('#list-links li.hover').next().find('a').trigger('click');
}, 3000);
});
</script>
</head>
<body>
<div id="pagewrap">
<div class="wrap">
<div id="menu-slider">
<ul id="list-links">
<li class="hover"><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li class="last"><a href="#">Link 6</a></li>
</ul>
<ul id="list-images">
<li style="background:#04ff62">Slide 1 </li>
<li style="background:#f00">Slide 2 </li>
<li style="background:#333">Slide 3 </li>
<li style="background:#000">Slide 4 </li>
<li style="background:#0e9815">Slide 5 </li>
<li style="background:#183bae">Slide 6 </li>
<li style="background:#8c26c6">Slide 7 </li>
<li style="background:#a6540a">Slide 8 </li>
<li style="background:#680404">Slide 9 </li>
</ul>
</div>
<div id="menu-slider">
<ul id="list-linksm1">
<li class="hover"><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li class="last"><a href="#">Link 6</a></li>
</ul>
<ul id="list-images1">
<li style="background:#04ff62">Slide 1 </li>
<li style="background:#f00">Slide 2 </li>
<li style="background:#333">Slide 3 </li>
<li style="background:#000">Slide 4 </li>
<li style="background:#0e9815">Slide 5 </li>
<li style="background:#183bae">Slide 6 </li>
<li style="background:#8c26c6">Slide 7 </li>
<li style="background:#a6540a">Slide 8 </li>
<li style="background:#680404">Slide 9 </li>
</ul>
</div>
</div>
</div>
</body>
</html>

Topic Participants
klausikoe
kbwood.au

change initiate time of slider

change initiate time of slider

Topic Participants

klausikoe

kbwood.au