Slider en poo

Bonjour, j'ai créé un slider, sauf qu'on me demande de réécrire mon code en orienté objet et là!
Ma tête brûle.
Voici le code, si quelqu'un peut prendre un peu de son temps. Merci
j'ai donc compris que je devais utilisée des class avec contrustor ect avec des this et new.

// Variables d'ensemble
let compteur = 0;
let timer;
let elements;
let slides;
let slideWidth;


window.onload = () => {
    const diapo = document.querySelector(".diapo")
    elements = document.querySelector(".elements");
    slides = Array.from(elements.children);

    //On calcule la largeur visible du diaporama
    slideWidth = diapo.getBoundingClientRect().width;

    let next = document.querySelector("#nav-droite");
    let prev = document.querySelector("#nav-gauche");
    let pause = document.querySelector("#pause");
    let play = document.querySelector("#play");

    next.addEventListener("click", slideNext);
    prev.addEventListener("click", slidePrev);
    pause.addEventListener("click", slidePause);
    play.addEventListener("click", slidePlay);

    // RESPONSIVE 
    window.addEventListener("resize", () => {
        slideWidth = diapo.getBoundingClientRect().width;
        slideNext();
    })

}

timer = setInterval(slideNext, 5000)

document.addEventListener("keydown", function (fleche) {
    if (fleche.keyCode === 37) {
        slidePrev();
    }
    else if (fleche.keyCode === 39) {
        slideNext();
    }
});

function slideNext() {
    compteur++;
    if (compteur == slides.length) {
        compteur = 0;
    }
    // Permet de deplacer horizontalement le diaporama
    let decal = -slideWidth * compteur;
    elements.style.transform = `translateX(${decal}px)`;
}

function slidePrev() {
    compteur--;
    if (compteur < 0) {
        ;
        compteur = slides.length - 1;
    };
    let decal = -slideWidth * compteur;
    elements.style.transform = `translateX(${decal}px)`;
}

function slidePause() {
    document.querySelector('#pause').classList.add("d-none");
    document.querySelector('#play').classList.remove("d-none");
    clearInterval(timer);
}

function slidePlay() {
    document.querySelector('#play').classList.add("d-none");
    document.querySelector('#pause').classList.remove("d-none");
    timer = setInterval(slideNext, 5000)
}

Sii besoin voici le code html pour le slider

<div class="diapo position-relative col-12 p-0" id="diapo">
                <h2 class="mb-3 text-center col-12">Comment ça marche ?</h2>
                <div class="elements d-flex col-12 p-0 h-100">
                    <!-- Première diapo -->
                    <div class="element position-relative col-12 p-0 h-100">
                        <img class="col-12 p-0 h-100"
                             src="assets/img/fond.png"
                             alt="slide1" />
                        <div class="caption p-3 text-center position-absolute col-6 p-0">
                            <h3>
                                <i class="fas fa-map-marker-alt"></i> Choix de la station
                            </h3>
                            <p>
                                Veuillez choisir votre station sur la carte de Rouen si
                                dessous
                            </p>
                        </div>
                    </div>
                    <!-- Deuxième diapo -->
                    <div class="element position-relative col-12 p-0 h-100">
                        <img class="col-12 p-0 h-100"
                             src="assets/img/fond.png"
                             alt="slide2" />
                        <div class="caption p-3 text-center position-absolute col-6">
                            <h3>
                                <i class="fas fa-info-circle"></i> Informations de la station
                            </h3>
                            <p>
                                Aprés avoir cliqué sur un marqueur vous verrez les
                                informations concernant la station.
                            </p>
                        </div>
                    </div>
                    <!-- Troisième diapo-->
                    <div class="element position-relative col-12 p-0 h-100">
                        <img class="col-12 p-0 h-100"
                             src="assets/img/fond.png"
                             alt="slide3" />
                        <div class="caption p-3 text-center position-absolute col-6">
                            <h3>
                                <i class="fas fa-address-book"></i> Remplir le formulaire
                            </h3>
                            <p>
                                Aprés avoir choisit votre station veuillez remplir votre nom
                                ,prénom et signez dans le cadre blanc pour réserver !
                            </p>
                        </div>
                    </div>
                    <!-- Quatrième diapo-->
                    <div class="element position-relative col-12 p-0 h-100">
                        <img class="col-12 p-0 h-100"
                             src="assets/img/fond.png"
                             alt="slide4" />
                        <div class="caption p-3 text-center position-absolute col-6">
                            <h3>
                                <i class="fas fa-stopwatch-20"></i> Votre vélo est réservé
                            </h3>
                            <p>
                                Aprés avoir cliquez sur le button, votre vélo est donc
                                disponible pendant 20min.
                            </p>
                        </div>
                    </div>
                </div>

Modifié par loic59244 (09 Jul 2021 - 00:43)

Salut,

la question posée m'a l'air trop vague pour y apporter une vrai réponse ..

En réponse à la va vite avec ton code, tu risques de devoir créer une classe Diaporama dans ce genre la (à toi de voir si tu figes les noms des classes .diapo et .elements ou si c'est paramétrable en ajoutant des attributs au constructor) :

class Diaporama {
  constructor() {
    this.diapo = document.querySelector(".diapo");
   elements = document.querySelector(".elements");
    this.slides = Array.from(elements.children);
  }
}

Enfin bref, a priori il faut que tu lises de la documentation sur la POO ... Par exemple : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Classes

Mathieuu a écrit :
Salut,

la question posée m'a l'air trop vague pour y apporter une vrai réponse ..

En réponse à la va vite avec ton code, tu risques de devoir créer une classe Diaporama dans ce genre la (à toi de voir si tu figes les noms des classes .diapo et .elements ou si c'est paramétrable en ajoutant des attributs au constructor) :

class Diaporama {
  constructor() {
    this.diapo = document.querySelector(".diapo");
   elements = document.querySelector(".elements");
    this.slides = Array.from(elements.children);
  }
}

Enfin bref, a priori il faut que tu lises de la documentation sur la POO ... Par exemple : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Classes

j'aimerai savoir comment faire pour y incorporer mes fonctions après cet class et par exemple si le windos.onload est toujours utilisable

Tes fonctions ne seront plus des fonctions mais des "méthodes" (en gros des fonctions qui sont inclus dans ta classe et s'applique à/via un élément de ta classe)

Le window.onload sera toujours utilisable mais au lieu d'y appeler des fonctions tu y feras un "new" de ta classe puis tu utiliseras les méthodes définit dans ta classe.