Automatiser un slide Javascript

Fermé
jeremy540 - 24 juil. 2012 à 12:06
tuxboy Messages postés 995 Date d'inscription lundi 23 juillet 2012 Statut Membre Dernière intervention 28 mai 2019 - 25 juil. 2012 à 12:42
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>



A voir également:

2 réponses

up please :(
0
tuxboy Messages postés 995 Date d'inscription lundi 23 juillet 2012 Statut Membre Dernière intervention 28 mai 2019 190
25 juil. 2012 à 12:42
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