Automatiser un slide Javascript

Bonjour,

Je travail sur un template de site internet.
Celui-ci dispose d'un slide en Javascript déjà fonctionnel.

Je souhaiterais simplement lui ajouter une fonction, actuellement il fait défiler mes images de gauche à droite avec un "onclick"...
Je voudrais l'automatiser pour qu'il "slide" les images tout seul toutes les 3 secondes, mais je ne sais pas comment faire...

Est-ce que quelqu'un peut m'aider?

Voici le Js :
function testimonials_slider() {
	var top = Math.floor($('#testimonials-first-container').height() / 2);
	top = top - 16;
	
	var testimonials_total = $('.testimonial').length;
	var testimonial_left = 1;
	var testimonial_right = 2;
	$('#testimonials-number').html('Articles ' + testimonial_left + ' & ' + testimonial_right + ' sur ' + testimonials_total);

	function enable_disable_testimonials_buttons() {
		if (testimonial_right === testimonials_total) {
			$('#testimonials-button-right').css('display', 'none');
			$('#testimonials-button-right-disabled').css('display', 'block');
		} else {
			$('#testimonials-button-right').css('display', 'block');
			$('#testimonials-button-right-disabled').css('display', 'none');
		}
		if (testimonial_left === 1) {
			$('#testimonials-button-left').css('display', 'none');
			$('#testimonials-button-left-disabled').css('display', 'block');
		} else {
			$('#testimonials-button-left').css('display', 'block');
			$('#testimonials-button-left-disabled').css('display', 'none');
		}
	}
	
	$('#testimonials-button-left').css('top', top + 'px');
	$('#testimonials-button-right').css('top', top + 'px');
	$('#testimonials-button-left-disabled').css('top', top + 'px');
	$('#testimonials-button-right-disabled').css('top', top + 'px');
	
	enable_disable_testimonials_buttons();
	
	$('#testimonials-button-right').click(function() {
		$('#testimonials-slide').animate({left: '-=390'}, 500, 'easeOutQuad');
		testimonial_left++;
		testimonial_right++;
		$('#testimonials-number').html('Articles ' + testimonial_left + ' & ' + testimonial_right + ' sur ' + testimonials_total);
		enable_disable_testimonials_buttons();
		return false;
	});
	$('#testimonials-button-left').click(function() {
		$('#testimonials-slide').animate({left: '+=390'}, 500, 'easeOutQuad');
		testimonial_left--;
		testimonial_right--;
		$('#testimonials-number').html('Articles ' + testimonial_left + ' & ' + testimonial_right + ' sur ' + testimonials_total);
		enable_disable_testimonials_buttons();
		return false;
	});
}


Voici mon code HTML pour afficher le slide :
						

<div id="testimonials-slide">
	<?php
							
		while ($donnees = mysql_fetch_array($reponse) )
				{
	?>
	<div class="testimonial">
							
	<div class="testimonial-top"></div>
							

		<div class="testimonial-content">
			<p class="news-meta-date"> le <?php echo $donnees['date_cre']; ?></p>
                          <span class="testimonial-sender"><a href="http://localhost/test/admin/news_fiche.php?id=<?php echo $donnees['news_id']; ?>"><?php echo '<p>'.htmlentities(strip_tags(substr(html_entity_decode($donnees['news_titre']), 0, 20))). '...</p>'; ?></a></span>
                                    <br>
			<a href="http://localhost/test/admin/news_fiche.php?id=<?php echo $donnees['news_id']; ?>">                                     <img class="testimonial-image" src="http://localhost/test/admin/news_photos/<?php echo $donnees['news_photo']; ?>" alt="" />
                                    </a>
			<?php echo '<p>'.htmlentities(strip_tags(substr(html_entity_decode($donnees['news_contenu']), 0, 120))). '...</p>'; ?>
									<br/>
                        <a href="http://localhost/test/admin/news_fiche.php?id=<?php echo $donnees['news_id']; ?>">Lire l'article...</a>
		</div>

								
			<div class="testimonial-bottom"></div>
								
	</div>

	<?php
		}
	?>
							
	</div>


2 réponses

  • Votes
  • Date
  • Date décroissante