Automatiser un slide Javascript

jeremy540 -  
tuxboy Messages postés 995 Date d'inscription   Statut Membre Dernière intervention   -
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

jeremy540
 
up please :(
0
tuxboy Messages postés 995 Date d'inscription   Statut Membre Dernière intervention   190
 
J'ai l'impression que tu t'attaques à un problème plus fort que toi et qu'une réponse directe ne t'aiderait pas beaucoup...
Pour implémenter ce slide que tu désires tant, il te faudra tout d'abord supprimer l'ancien.
Ensuite, tu feras appel à JQuery par exemple, qui regorge de ces "lightbox" avec des effets tous plus réussi les uns que les autres.
https://www.designyourway.net/blog/resources/30-efficient-jquery-lightbox-plugins/
0