Afficher un élément avec un bouton next ou prev

Bonjour,

Je suis frustrer de poser cette question mais voilà.....

J'ai un enxemble de témoignage que j'aimerais rendre visible avec des flèches > ou <.

Mon code HTML est le suivant:

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

<div id="temoignage-slider">   <div data-index="1" class="item" style="display:none;"> <h3>Maud</h3> </div> <div data-index="2" class="item" style="display:none;"> <h3>Sandrine</h3> </div> <div data-index="3" class="item" style="display:none;"> <h3>Sebastien</h3> </div> <div data-index="4" class="item" style="display:none;"> <h3>Olivier R</h3> </div> <div data-index="5" class="item" style="display:none;"> <h3>Jordi</h3> </div> <div data-index="6" class="item" style="display:none;"> <h3>Fra</h3> </div> <div data-index="7" class="item" style="display:none;"> <h3>Carene</h3> </div>   <div class="nav_temoignages"> <div class="nav_button" onclick="plusDivs(-1)">&lt;</div> <div class="nav_button" onclick="plusDivs(1)">&gt;</div> </div> </div>

---

En premier temps, j'aimerais que si on affiche la page, le data-index=1 soit visible. Puis, avec les bouton < ou > , on affiche le suivant ou le précédent.

J'ai essayé de trouver l'index

Code:

---

1 2 3

$(document).ready(function(){ console.log($('#temoignage-slider').index()); });

---

Il m'affiche 7 (après avoir rafraichi la page), soit le dernier, alors j'ai essayé de faire que le dernier soit qui s'affiche, mais sans succès

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13

$(document).ready(function(){ console.log($('#temoignage-slider').index());   $('#temoignage-slider').each(function(inde){ console.log(inde);   if($(this).data("index") == 7) { $(this).show(); } }); //$('.item').attr("data-index",$('#temoignage-slider').index()).show(); });

---

Je pense qu'après, je peux déduire ou augmennter l'index et cliquand sur les boutons < et >.

Pourriez-.vous me mettre sur une piste pour faire un truc simple comme cela?

Mercii :(

Bonjour,

Ajoutes les classes prev et next au boutons comme ça :

Code:

---

1 2 3

<div class="nav_button prev" >&lt;</div> <div class="nav_button next" >&gt;</div>

---

Et utilise ce code :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

$(document).ready(function() { //Afficher le premier .item $('#temoignage-slider .item').first().show(); //clic sur .nav_button prev/next $('#temoignage-slider .nav_button') .click(function() { let prev = $(this).parent().siblings('.item:visible').prev('.item'),//elément qui precède .item visible (s'il existe) next = $(this).parent().siblings('.item:visible').next('.item');//elément suivant de .item visible (s'il existe) $(this).parent().siblings('.item').hide();//masquer tout les .item à chaque clic if ($(this).hasClass('prev')) { if (prev.length) prev.show(); else $(this).parent().siblings('.item').last().show(); } else if ($(this).hasClass('next')) { if (next.length) next.show(); else $(this).parent().siblings('.item').first().show(); } }); });

---

Remarques

• Avec ce code, si le premier .item est déjà affiché et que l'on clic sur précédent , c'est le dernier élément qui sera afficher (ça tourne en boucle,et vice versa), sinon tu peux par exemple désactiver les boutons prev quand le premier .item est affiché et next quand le dernier élément est affiché.
• Supprimes l'attribut html "onclick" et utilises plutôt la syntaxe jQuery.

Merci beaucoup toufik et bonne année!!

Hello
Malheureusement, je n'arrive pas à faire fonctionner ce code.

Le next/prev ne fonctionne pas et le console.log

Code:

---

1 2 3

console.log("prev:",prev); console.log("next:",next);

---

me retourne une valeur de 0

J'ai aussi ajouté ceci

Code:

---

1 2 3 4

#temoignage-slider .item{ display: none; }

---

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

$(document).ready(function(){ //Afficher le premier .item $('#temoignage-slider .item').first().show(); //clic sur .nav_button prev/next $('#temoignage-slider .nav_button').click(function() { //alert('1');   let prev = $(this).parent().siblings('.item:visible').prev('.item'),//elément qui precède .item visible (s'il existe) next = $(this).parent().siblings('.item:visible').next('.item');//elément suivant de .item visible (s'il existe)   console.log("prev:",prev); console.log("next:",next); $(this).parent().siblings('.item').hide();//masquer tout les .item à chaque clic   alert('2');   if ($(this).hasClass('prev')) { if (prev.length) { alert('3'); prev.show(); } else { alert('4'); $(this).parent().siblings('.tem').last().show(); } } else if ($(this).hasClass('next')) { if (next.length) { next.show(); } else { alert('5'); $(this).parent().siblings('.item').first().show(); } } }); });

---

J'ai l'impression qu'il n'arrive pas à cibler son élément supérieur... :(

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

<div id="temoignage-slider"> <div data-index="1" class="item" style="display: block;"> <h3>Maud</h3> </div> <div data-index="2" class="item"> <h3>Sandrine</h3> </div> <div data-index="3" class="item"> <h3>Sebastien</h3> </div> <div data-index="4" class="item"> <h3>Olivier R</h3> </div> <div data-index="5" class="item"> <h3>Jordi</h3> </div> <div data-index="6" class="item"> <h3>Fra</h3> </div> <div data-index="7" class="item"> <h3>Carene</h3> </div>   <div class="nav_button prev">prev &lt; </div>&nbsp; <div class="nav_button next">next &gt; </div>   </div>

---

Bonjour,

Dans le premier code HTML, tu as mis les boutons à l'intérieur de <div class="nav_temoignages"></div>

Code:

---

1 2 3 4 5

<div class="nav_temoignages"> <div class="nav_button" >&lt;</div> <div class="nav_button" >&gt;</div> </div>

---

alors que dans le 2éme code, tu as supprimé ce div, et donc ceci ne fonctionnera pas parce que le code js été adapté à la première structure.

Pour le faire fonctionner avec la deuxième structure, il faut supprimer .parent() de tout les .parent().siblings() pour qu'ils devient seulement .siblings()ou bien remettre les boutons à l'intérieur d'un élément sans toucher au code js.

Remarques :

• Décommenter la ligne 14 et la corriger $(this).siblings('.item').hide();//masquer tout les .item à chaque clic
• :alerte: Attention il manque un "i" dans le nom de la classe :$(this).parent().siblings('.tem').last().show(); à la ligne 27 la correction : $(this).siblings('.item').last().show()

Ha oui, ca va vraiment mieux comme cela!!!
Merci beaucoup!!!!!