Automatiser un slide Javascript
jeremy540
-
tuxboy Messages postés 995 Date d'inscription Statut Membre Dernière intervention -
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 :
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
- A javascript error occurred in the main process - Forum Handicap / Accessibilté
- Afficher un tableau javascript en html ✓ - Forum Javascript
- Erreur #125 javascript - Forum Mozilla Firefox
- Javascript arrondi - Forum Javascript
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/