problems with self-made slider

problems with self-made slider

Hello guys,
I got some problems with my self-made slider in Jquery.
Every 7 seconds it changes the image automaticaly.
But I also have a div -> arrow-right, to manualy go to the next image.

But when I click that div, then it does go to the next images, but it keeps repeating that and the 7 seconds delay is then gone.

the html-part code:
  1. <div id="slider"> <div id="slider-image-holder"></div> <div id="arrow-left"> <div id="arrow-left-inner"></div> </div> <div id="slider-small-box"> <div id="1" class="slider-circle"></div> <div id="2" class="slider-circle"></div> <div id="3" class="slider-circle"></div> 
     <div id="4" class="slider-circle"></div> <div class="clear"></div> </div> <div id="arrow-right"> <div id="arrow-right-inner"></div> </div> </div>
The full Javascript-part code
  1. $(document).ready(function() { xmlFile = 'slider-content.php'; xmlMode = 'afgerond'; project = []; project[1] = []; project[2] = []; project[3] = []; project[4] = []; number = 1; loadXML(xmlFile, xmlMode, processXML); }); function loadXML(file, mode, callback) { $.get( file + '?mode=' + mode, {}, function (xml) { callback(xml); }, 'xml' ); } function processXML(xml) { $(xml).find('project').each(function() { project[number] = []; project[number]['id'] = $(this).find('id').text(); project[number]['titel'] = $(this).find('titel').text(); if(($(this).find('beschrijving').text()).length > 150) { project[number]['beschrijving'] = ($(this).find('beschrijving').text()).substr(0, 150) + '...'; } else { project[number]['beschrijving'] = $(this).find('beschrijving').text(); } project[number]['compatabiliteit'] = $(this).find('compatabiliteit').text(); project[number]['afbeelding'] = $(this).find('afbeelding').text(); project[number]['url'] = $(this).find('url').text(); number++; }); number = 0; $('#slider-image-holder').append('<div class="slider-image1"></div>'); $('#slider-image-holder').append('<div class="slider-image2"></div>'); $('#slider-image-holder').append('<div class="slider-image3"></div>'); sliderData(); } function sliderData() { number = number + 1; if(number > 4) { number = 1; } $('#'+number).addClass('slider-current-circle'); $('#'+number).removeClass('slider-circle'); $('#slider-image-holder').append('<div class="slider-image4"></div>'); $('.slider-image1').append('<div class="slider-image-info"></div>'); $('.slider-image1 .slider-image-info').append('<div class="image-info-titel"><a href="http://' + project[1]['url'] + '">' + project[1]['titel'] + '</a></div>'); $('.slider-image1 .slider-image-info').append('<div class="image-info-kop">Compatabiliteit:</div>'); $('.slider-image1 .slider-image-info').append('<div class="image-info-compatible"></div>'); if(project[1]['compatabiliteit'].indexOf("Internet Explorer") != -1) { $('.slider-image1 .slider-image-info .image-info-compatible').append('<img src="images/browser-icon/IE.png" alt="IE" class="image-info-compatible-icon">'); } if(project[1]['compatabiliteit'].indexOf("Firefox") != -1) { $('.slider-image1 .slider-image-info .image-info-compatible').append('<img src="images/browser-icon/Firefox.png" alt="Firefox" class="image-info-compatible-icon">'); } if(project[1]['compatabiliteit'].indexOf("Opera") != -1) { $('.slider-image1 .slider-image-info .image-info-compatible').append('<img src="images/browser-icon/Opera.png" alt="Opera" class="image-info-compatible-icon">'); } if(project[1]['compatabiliteit'].indexOf("Chrome") != -1) { $('.slider-image1 .slider-image-info .image-info-compatible').append('<img src="images/browser-icon/Chrome.png" alt="Chrome" class="image-info-compatible-icon">'); } if(project[1]['compatabiliteit'].indexOf("Safari") != -1) { $('.slider-image1 .slider-image-info .image-info-compatible').append('<img src="images/browser-icon/Safari.png" alt="Safari" class="image-info-compatible-icon">'); } $('.slider-image1 .slider-image-info .image-info-compatible').append('<div class="clear"></div>'); $('.slider-image1 .slider-image-info').append('<div class="image-info-kop">Beschrijving:</div>'); $('.slider-image1 .slider-image-info').append('<div class="image-info">' + project[1]['beschrijving'] + '</div>'); $('.slider-image2').append('<div class="slider-image-info"></div>'); $('.slider-image2 .slider-image-info').append('<div class="image-info-titel"><a href="http://' + project[2]['url'] + '">' + project[2]['titel'] + '</a></div>'); $('.slider-image2 .slider-image-info').append('<div class="image-info-kop">Compatabiliteit:</div>'); $('.slider-image2 .slider-image-info').append('<div class="image-info-compatible"></div>'); if(project[2]['compatabiliteit'].indexOf("Internet Explorer") != -1) { $('.slider-image2 .slider-image-info .image-info-compatible').append('<img src="images/browser-icon/IE.png" alt="IE" class="image-info-compatible-icon">'); } if(project[2]['compatabiliteit'].indexOf("Firefox") != -1) { $('.slider-image2 .slider-image-info .image-info-compatible').append('<img src="images/browser-icon/Firefox.png" alt="Firefox" class="image-info-compatible-icon">'); } if(project[2]['compatabiliteit'].indexOf("Opera") != -1) { $('.slider-image2 .slider-image-info .image-info-compatible').append('<img src="images/browser-icon/Opera.png" alt="Opera" class="image-info-compatible-icon">'); } if(project[2]['compatabiliteit'].indexOf("Chrome") != -1) { $('.slider-image2 .slider-image-info .image-info-compatible').append('<img src="images/browser-icon/Chrome.png" alt="Chrome" class="image-info-compatible-icon">'); } if(project[2]['compatabiliteit'].indexOf("Safari") != -1) { $('.slider-image2 .slider-image-info .image-info-compatible').append('<img src="images/browser-icon/Safari.png" alt="Safari" class="image-info-compatible-icon">'); } $('.slider-image2 .slider-image-info .image-info-compatible').append('<div class="clear"></div>'); $('.slider-image2 .slider-image-info').append('<div class="image-info-kop">Beschrijving:</div>'); $('.slider-image2 .slider-image-info').append('<div class="image-info">' + project[2]['beschrijving'] + '</div>'); $('.slider-image1').css('background', 'url("images/projects/websites/' + project[1]['afbeelding'] + '")'); $('.slider-image2').css('background', 'url("images/projects/websites/' + project[2]['afbeelding'] + '")'); $('.slider-image3').css('background', 'url("images/projects/websites/' + project[3]['afbeelding'] + '")'); $('.slider-image4').css('background', 'url("images/projects/websites/' + project[4]['afbeelding'] + '")'); $('.slider-image1 .slider-image-info').animate( { 'margin-left': '+=215px' }, 2000); setTimeout(function() { animateNext(); }, 7000); } function animateNext() { $('.slider-image1').animate( { 'left': '-=100%' }, 5000); setTimeout(function() { $('.slider-image1').remove(); $('.slider-image-info').remove(); $('.slider-image2').addClass('slider-image1'); $('.slider-image1').removeClass('slider-image2'); $('.slider-image3').addClass('slider-image2'); $('.slider-image2').removeClass('slider-image3'); $('.slider-image4').addClass('slider-image3'); $('.slider-image3').removeClass('slider-image4'); project[0] = project[1]; project[1] = project[2]; project[2] = project[3]; project[3] = project[4]; project[4] = project[0]; $('#'+number).removeClass('slider-current-circle'); $('#'+number).addClass('slider-circle'); sliderData(); }, 5000); } $('.slider-circle').live('click', function() { alert($(this).attr('id')); }); $('#arrow-right').live('click', function() { animateNext(); });
I think though, that the problem is somewhere around here:
  1. $('#arrow-right').live('click', function() { animateNext(); });
I hope someone can help me with this.
I am really getting desperate.

Thanks in Advance,
Mark

EDIT: sorry, but somehow the forum has put the code all on 1 line. Sorry if it is so hard to read.