Orienté objet

staf
Javascript

Bonjour,

Voila je rencontre un petit problème avec mon code. Ce dernier me permet de créer un diaporama automatique, mais, il me le faut en orienté objet il parait???? voici le code:

Ce que je fais

Décrivez ici votre code ou ce que vous cherchez à faire

    var slides = document.querySelectorAll('.slide');
    var buttRight = document.querySelector('.butt-suivant');
    var buttLeft = document.querySelector('.butt-precedent');
    var buttPause = document.querySelector('.butt-pause');

    var index = 0;

    function slideSuivant(){
        slides[index].classList.remove('slide-active');
        if(index === 3){
        index = -1;
    }
        slides[index+1].classList.add('slide-active');
        index = index + 1;
    };
    //slide suivant au click
    buttRight.addEventListener('click', function(){
        slides[index].classList.remove('slide-active');
        if(index === 3){
        index = -1;
    }
        slides[index+1].classList.add('slide-active');
        index = index + 1;
    });

    //slide précédent au click
    buttLeft.addEventListener('click', function(){
        slides[index].classList.remove('slide-active');
        if(index === 0){
        index = 3;
    }
        slides[index-1].classList.add('slide-active');
        index = index-1;
    });

    //slide auto
    var idInterval = window.setInterval(function(){
        slideSuivant();
    },2000);//Défilement des images toutes les 2 secondes

    //stop du slide auto
    buttPause.addEventListener('click', function(){
        if (buttPause.classList.contains('enpause')) {//en pause->il relance le timer
        window.clearInterval(idInterval);
        idInterval = window.setInterval(function(){
        slideSuivant();
    },2000);
    buttPause.classList.remove('enpause');
    }else{//n'est pas en pause->il met en pause
        window.clearInterval(idInterval);
        buttPause.classList.add('enpause');
    }           
    });

Ce que je veux

Mon but c'est de mettre mon code en orienté objet. Alors là, gros souci et en plus, il me faut pouvoir défiler mes sliders avec les flêches du clavier de l'ordinateur. Si quelqu'un m'a compris, je suis novice et ça me prend la tête. Voilà

Ce que j'obtiens

Décrivez ici vos erreurs ou ce que vous obtenez à la place de ce que vous attendez :(

3 réponses

staf
Auteur
Réponse acceptée

Bonjour, Balsakup,
Merci d'avoir pris de ton temps. Pas encore testé, mais cela me semble claire. je te ferai un retour.
Merci encore une fois

Balsakup

Salut,

Voilà à quoi ça pourrait ressembler de passer ton slider en JS POO. 

function Slider(slidesContainer) {
    this.slidesContainer = slidesContainer;
    this.current         = 0;
}

Slider.prototype.next = function () {
    var children = this.slidesContainer.children;

    children[this.current].classList.remove('active');
    children[++this.current % children.length].classList.add('active');
};

Slider.prototype.previous = function () {
    var children = this.slidesContainer.children;

    children[this.current].classList.remove('active');
    children[--this.current % children.length].classList.add('active');
};

var nextBtn     = document.getElementById('next');
var previousBtn = document.getElementById('previous');
var slider      = new Slider(document.getElementById('slides'));

nextBtn.addEventListener('click', slider.next.bind(slider), false);
previousBtn.addEventListener('click', slider.previous.bind(slider), false);
window.addEventListener('keydown', function (event) {
    switch (event.key) {
        case 'ArrowRight':
            slider.next();
            break;
        case 'ArrowLeft':
            slider.previous();
            break;
    }
}, false);
Balsakup

@staf, je n'ai pas testé non plus, le but étant de ne pas te donner la solution, mais un aperçu de la solution.
A toi de l'adapter pour que ça fonctionne pour ton cas ;)