Automatiser un slide Javascript
jeremy540
-
tuxboy Messages postés 1083 Statut Membre -
tuxboy Messages postés 1083 Statut Membre -
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 :
Voici mon code HTML pour afficher le slide :
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:
- Javascript slide
- Telecharger javascript - Télécharger - Langages
- Javascript echo ✓ - Forum PHP
- Afficher un tableau javascript en html ✓ - Forum Javascript
- Javascript arrondi - Forum Javascript
- Javascript arrondi après la virgule ✓ - Forum Windows
2 réponses
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/
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/