Bonjour, 

Je viens ici en appel à l'aide car je suis bloqué sur un sacré bout de temps.

Avant toute chose je tiens à préciser que je suis débutant en JS et dans ce dont je vais vous montrer j'ai dû faire pas mal de truc un peu bizarre.

J'explique la chose, j'ai une sorte de slide, mais composé de 6 divisions, pas des images car c'est des informations qui s'actualiseront toute seules étant donné que les divisions sont connectées à la base de données/serveur etc.. En gros, je voulais faire une animation slide à droite ou a gauche en JS (mais pour le moment j'ai mis ça de coté). J'ai créer une navigation manuelle avec une fleche à droite et à gauche, qui swap de slide 1 à 6 : je ne trouvais pas comment faire ça m'a prit la tête donc j'ai finis par créer une fonction qui lorsqu'on clique sur la fléche, ça incrémente a= a+1 jusqu'à 6. Puis après j'ai défini par exemple pour swiper à droite, si on clique une fois la valeur est d'1 donc exemple : if ((a==1)) { ça met le display de la diapo 1 en block et les 5 autres en none}.

Je sais je ne suis vraiment pas très clair, j'espère que réussirez à me lire un minimum.

ET le problème intervient où j'y ai pensé après coup : Quand par exemple on a déjà cliqué sur la flèche pour swiper à droite et que donc la valeur de "a" augmente, si on clique sur la flèche de gauche ça ne swipe pas à gauche d'une seule div car la valeur part de 1. Enfin c'est emmêlé je ne sais pas si c'est compréhensible, bref je me demande (car je sais qu'il existe plusieurs autre solution qui, dues à mon expérience faible en JS ne me sont pas venues à l'esprit pour faire une fonction qui swipe d'une div a droite quand on clique sur la flèche de droite et d'une div à gauche quand on clique sur la flèche de gauche, et tout ça de façon à ce que même si je suis déjà par exemple à la 3eme div sur 6, ça passe bel et bien à la 2.

J'espère ne pas vous retourner le cerveau, 

J'attends vos retour,

Merci beaucoup, bon weekend,

Cordialement.

-
Edité par Zartex 26 novembre 2021 à 18:37:35

Difficile de t'aider si tu ne nous donnes pas le code que tu as déjà fait.

Bon, voici les étapes que je te suggérer.

Tout d'abord, il te faut un document HTML contenant 6 divs. Ces divs contiennent tes photos, mais dans un premier temps, tu peux tout simplement écrire 1 dans ta première div, 2 dans ta seconde, etc. Une seule de ces divs a un display: block, les autre sont en display:none. Disons qu'au départ, c'est la première div qui est en display:block. Il est important que ces divs aient un attribut id pour que javascript puisse les retrouver. Disons div1, div2, etc.
Puis tu mets deux boutons, la flèche vers l'arrière, et la flèche vers l'avant.

Ensuite, passons au JS.

Il te faut donc une variable ( appelons la "currentDiv", moi j'aime bien les noms explicites ), initialisée à 1 ( ou tout nombre entre 1 et 6 ).
Maintenant, il te faut appliquer des eventListeners à ces boutons.
Dans la callback de la flèche vers l'avant, il y a tout d'abord l'incrémentation ( currentDiv +=1 ). Et dans la flèche vers l'arrière la décrémentation ( currentDiv -=1 ).
De là tu as deux choix, soit on ne peut pas aller vers l'arrière depuis la première div, soit on considère que l'arrière de la première div est la div 6 ( et donc l'avant de la div 6 est la div 1 ).
Dans le premier cas, si currentDiv est égal à 1, tu enlève l'eventListener de ton bouton arrière. Et donc si currentDiv est égal à 6, tu enlève l'eventListener du bouton avant. Et il faut rétablir ces eventListeners quand currentDiv est égal à 2 ou 5.
Dans le deuxième cas, il faut traiter la valeur de currentDiv pour la maintenir dans la fourchette 1 à 6. Donc si tu as décrémenté à partir de 1, currentDiv est égal à 0. Donc si currentDiv est égal à 0, réaffecte sa valeur à 6. Et donc si currentDiv est égal à 7, réaffecte sa valeur à 1.
Et enfin, il te reste à gérer l'affichage de tes divs.
Premièrement, tu fais disparaître toutes tes divs ( celles qui sont déjà à display:none ne seront pas affectées, et la div visible disparaîtra ). Ensuite tu fais apparaître la div ayant pour id ("div" + currentDiv).

Voilà un exercice assez simple, ça te donnera les bases de la manipulation du DOM et des eventListeners à maîtriser pour faire ton projet final.
Bien sûr, tu peux aussi n'avoir qu'une seule div, celle dans laquelle s'affichera ton image. Et tu stockeras les adresses des images dans un array. ( attention, les index de array commencent à zéro ! ). Il te suffira alors de remplacer la valeur de l'attribut src de ta balise img.

Commence à faire quelque chose de simple et dis-nous où tu bloques, en postant ton code pour qu'on puisse te guider ( pense à bien mettre ton code dans le bloc code )

Salut, 

Merci pour ta réponse, premièrement ce dont tu m'as parlé au début tout cela est déjà fais, (et ce n'est pas des images dans mes divs comme je l'ai dis auparavant).

Le seul moment ou ça bloque et où je n'ai pas tout compris c'est dans le java.

a = 0;
function prev1()
{


    if (document.getElementById('b10').onclick){
    
        a= a + 1;
        console.log(a) 
        
    } 
    
    

    if((a == 1)) {
        document.getElementById("div1").style.display = "none";
        document.getElementById("div3").style.display = "none";
        document.getElementById("div4").style.display = "none";
        document.getElementById("div5").style.display = "none";
        document.getElementById("div6").style.display = "block";
        document.getElementById("div2").style.display = "none";
}
if((a == 2)) {

    document.getElementById("div1").style.display = "none";
    document.getElementById("div3").style.display = "none";
    document.getElementById("div4").style.display = "none";
    document.getElementById("div5").style.display = "block";
    document.getElementById("div6").style.display = "none";
    document.getElementById("div2").style.display = "none";
}
if((a == 3)) {

    document.getElementById("div1").style.display = "none";
    document.getElementById("div3").style.display = "none";
    document.getElementById("div4").style.display = "block";
    document.getElementById("div5").style.display = "none";
    document.getElementById("div6").style.display = "none";
    document.getElementById("div2").style.display = "none";
}
if((a == 4)) {

    document.getElementById("div1").style.display = "none";
    document.getElementById("div3").style.display = "block";
    document.getElementById("div4").style.display = "none";
    document.getElementById("div5").style.display = "none";
    document.getElementById("div6").style.display = "none";
    document.getElementById("div2").style.display = "none";
}
if((a == 5)) {

    document.getElementById("div1").style.display = "none";
    document.getElementById("div3").style.display = "none";
    document.getElementById("div4").style.display = "none";
    document.getElementById("div5").style.display = "none";
    document.getElementById("div6").style.display = "none";
    document.getElementById("div2").style.display = "block";
}
if((a == 6)) {
    document.getElementById("div1").style.display = "block";
    document.getElementById("div3").style.display = "none";
    document.getElementById("div4").style.display = "none";
    document.getElementById("div5").style.display = "none";
    document.getElementById("div6").style.display = "none";
    document.getElementById("div2").style.display = "none";
}
if((a > 5)) {
    return a=0
}
}

Voici mon code actuel pour le bouton previous.

Et c'est grosso modo la même pour ce qui est du bouton next seulement avec les "none" et "block" inversé.

J'attends ton retour,

Cordialement

Oulà !
Il y a moyen de simplifier ce code.
Comme je le disais, tu pourrais commencer par attribuer une classe à toutes tes divs. Disons "mesDivs".
Ensuite, commence déjà par traiter la valeur de a pour savoir quelle sera la div à afficher.
Ensuite, cache toutes les divs, puis affiche la div voulue :

function previous() {
   a -= 1; //previous, c'est la précédente. Donc on enlève 1
   if(a == 0)
      a = 6; //Si on veut celle qui précède la première, afficher la dernière

//Maintenant cachons les divs
   let mesDivs = document.getElementsByClassName('mesDivs'); //récupère toutes les divs dans un tableau
   for( let div of mesDivs ){ //boucle sur le tableau
      div.style.display = "none";
   }
// Et enfin affichons la div voulue
   document.getElementById('div' + a).style.display = block;
}

Pas besoin de faire un return, ta fonction n'a pas besoin de retourner une valeur ( c'est d'ailleurs plutôt ce qu'on peut appeler une "procédure" ). Elle modifie la valeur da la variable a dans l'espace global, et s'occupe de manipuler le DOM ).

Pour la fonction next(), c'est tout pareil, sauf que cette fois on incrémente a ( a += 1 ou a++ ), puis si a est égal à 7, on repasse sa valeur à 1.

Okay merci j'ai essayé tout cela, et oui je sais que c'était un peu farfelu ce que j'avais fais avant.

Mais je ne comprends pas comment faire dans ton code sur un point, tu as mis :

//Maintenant cachons les divs
   let mesDivs = document.getElementsByClassName('mesDivs'); //récupère toutes les divs dans un tableau
   for( let div of mesDivs ){ //boucle sur le tableau
      div.style.display = "none";

et c'est le document.getElementsByClassName qui me perturbe, le truc c'est que j'ai une classe différente pour chaque div (donc 6 classes),

je suis un peu perdu du coup ;(

J'ai créé une division qui englobe les 6 div que j'ai nommé 'Alldivs' et j'ai essayé comme ça, mais comme je te dis je ne sais pas trop comment faire à partir de ce que je viens de te dire juste au dessus.

Au cas où j'ai fais ça :

function prev1() {
    a -= 1; //previous, c'est la précédente. Donc on enlève 1
    if(a == 0)
       a = 6; //Si on veut celle qui précède la première, afficher la dernière
  
 //Maintenant cachons les divs
    let Alldivs = document.getElementsByClassName('Alldivs'); //récupère toutes les divs dans un tableau
    for( let div of Alldivs ){ //boucle sur le tableau
       div.style.display = "none";
    }
 // Et enfin affichons la div voulue
    document.getElementById('div6' + a).style.display = block;
 }

Le div 6 à la dernière ligne c'est l'id de ma dernière div, c'est bien pour afficher la dernière j'ai pas fais de bêtises ? 

Merci à toi

UPDATE : 

Okay update j'avais mal lu avec la précipitation.

Mais donc on est d'accord qu'il faut que j'incorpore dans le code le fait que ça fasse tout cela mais quand je clique sur le bouton ?

Comme j'avais fais avant ? De ce type : 

function prev1() 
if (document.getElementById('b10').onclick){
    a -= 1; //previous, c'est la précédente. Donc on enlève 1
    console.log(a)
}
    if((a == 0)) {
       a = 6; //Si on veut celle qui précède la première, afficher la dernière
    }
 //Maintenant cachons les divs
    let Alldivs = document.getElementsByClassName('Alldivs'); //récupère toutes les divs dans un tableau
    for( let div of Alldivs ){ //boucle sur le tableau
       div.style.display = "none";
    }
 // Et enfin affichons la div voulue
 {
    document.getElementById('div' + a).style.display = block;
 }

J'ai créé une classe Alldivs, que j'ai mis dans chaque division mais j'ai mis cette classe vide, faut-il que je mette quelque chose, je m'embrouille un peu là. 

J'attends ton retour

-
Edité par Zartex 29 novembre 2021 à 10:44:43

Alors, reprenons quelques bases.

Un élément HTML peut avoir un attribut "id", sachant qu'un id doit être unique dans ton document HTML ( un seul élément peut avoir id="div1" ).
Du coup, en javascript on récupère cet élément avec document.getElementById('div1').

Ensuite, il y a l'attribut class, sachant que plusieurs éléments peuvent partager une même classe. En javascript, on récupère l'ensemble des éléments portant class="mesDivs" de la manière suivante : document.getElementsByClassName('mesDivs'). Cette méthode renvoie un array, même si il n'y a qu'un seul élément.

Dans la fonction que tu donnes, la ligne 2 veut dire "Si l'élément ayant pour id "b10" a un attribut onclick".
Ce qui ne sert pas à grand-chose.
Pour lancer la fonction prev1() quand on clique sur l'élément ayant pour id "b10", tu eux soit mettre cet appel dans le HTML ( bof ) :

<input type="button" on-click="prev1()" value="précédent" />

Soit dans le fichier javascript ( perso je préfère ) :

document.getElementById("b10").addEventListener("click", prev1);

Oui merci de ta réponse, j'avais lu trop vite ce que tu as dis ! 

Donc comme ça c'est sensé fonctionner ? :

function prev1() {
        document.getElementById("b10").addEventListener("click", prev1); 
        a -= 1; 
        if(a == 0)
           a = 6; 
      
   
        let Alldivs = document.getElementsByClassName('Alldivs'); //récupère toutes les divs dans un tableau
        for( let div of Alldivs ){ //boucle sur le tableau
           div.style.display = "none";
        }
    
        document.getElementById('div' + a).style.display = block;
     }

Et donc la classe que j'ai créé que je place à mes 6 divisions, je mets quoi dedans ? display : block; ?

Merci

-
Edité par Zartex 29 novembre 2021 à 17:22:12

Non, ta ligne 2 doit être en dehors de la fonction. Cette instruction ajoute l'écouteur d'évènement sur ton bouton.
Grosso modo, ton HTML définira les divs comme ceci :

<div id="div1" class="Alldivs">
<!-- contenu de ta div -->
</div>
<div id="div2" class="Alldivs">
<!-- contenu de ta div -->
</div>
<div id="div3" class="Alldivs">
<!-- contenu de ta div -->
</div>
<!-- etc. -->

et ton javascript commence comme ceci :

//tu place tes écouteurs d'évènements
document.getElementById('b10').addEventListener('click', prev1); //l'évènement 'click' déclenchera la fonction prev1()

function prev1(){ // tu définis la fonction prev1 qui sera appelée lors d'un click sur l'élément "b10"
//le contenu de ta fonction
}

Salut, 

Désolé j'étais malade, j'ai prêté très peu d'attention à ce que je faisais.

Néanmoins cela commence vraiment à me taper sur le système car cela fait 1 semaine que je bloque sur un truc tout con.

Je peux formuler tout ce que je veux faire de 10 façons différentes dans ma tête mais ayant peu de vocabulaire JavaS je galère.

C'est tellement simple bordel, je clique sur le bouton de gauche a-=1 et celui de droite a+=1 et tout cela compris entre 1 et 6.

Ca me frustre tellement, je sais que c'est pas drôle mais si t'as la solution entière est-ce possible de l'avoir ? 

Merci à toi

Non, je n'ai pas de solution toute faite. Et en ce moment j'ai hélas assez peu de temps à moi, je bosse avant tout sur ma formation.

Mon conseil :
Prend les choses pas à pas. Créé tes boutons "précédent" et "suivant" ajoute un eventListener sur chacun. dans un premier temps fais-leur simplement afficher dans la console un message tout simple, juste pour voir si ça fonctionne.

https://developer.mozilla.org/fr/docs/Web/API/EventListener

https://developer.mozilla.org/fr/docs/Web/API/Console/log

Ensuite créé ta variable "a", quoique je te conseille d'être plus explicite dans tes noms de variables, ça t'éviteras de te mélanger les crayons quand tu passera sur des projets plus complexes. "currentDiv" me plaisais bien. Initialise la avec une valeur de 1. Puis modifie tes eventListeners pour qu'ils incrémentent ou décrémentent ta variable, puis affichent la nouvelle valeur dans la console.

Et progresse petit à petit jusqu'à obtenir ce que tu veux.

Merci je vois totalement, 

Mais j'ai un problème car si j'initialise la variable CurrentDiv ou "a" à 1, ça marche bien pour le bouton suivant par exemple,

mais pas pour les précédentes du coup car comme je décrémente ça part à 0 ; -1 ; -2 etc..

Et lorsque je mets un if ((a==0)) { a=6} il ne convertit pas directement à 6 mais je dois cliquer une fois de plus sur le bouton pour passer à 6 car le 0 est toujours là.

Il y a t'il un moyen pour que quand je créé ma variable je puisse la définir tel que minimum 1 et maximum 6 afin que même sans "if" cela change passe de 1 à 6 directement quand je clique sur previous par exemple ? 

Merci vraiment pour le temps que tu m'accordes

Je pense que tu fais ton test au mauvais moment.
Dans l'eventListener de ton bouton, tu as, dans l'ordre :

- l'incrémentation ou la décrémentation de currentDiv ( ou a )

- le test de la valeur de currentDiv ( if(currentDiv == 0) { currentDiv = 6 } )

- et en dernier tu affiche l'élément en fonction de currentDiv.

C'est en tout le bien plus simple que de créer une variable dont la valeur devra être comprise entre 1 et 6, parce que là à priori ça nous emmène dans la programmation orientée objet, pour au final tenter d'obtenir la même chose : quand on enlève 1 à 1, ça doit faire 6.
Le plus simple à mon humble avis reste quand même de faire ton opération ( +1 ou -1 ), et de dire que si le résultat est 0, le transformer en 6, et si le résultat est 7, le transformer en 1.