Salut ami(e)s développeurs,
Je suis actuellement en plein développement d'une classe en JavaScript permettant de créer un slider depuis un template HTML.

<div id="slider">
    <div class="slides-container">
        <img class="single-slide" src="images/slide1.jpg" alt="">
        <img class="single-slide" src="images/slide2.jpg" alt="">
        <img class="single-slide" src="images/slide3.jpg" alt="">
        <img class="single-slide" src="images/slide4.jpg" alt="">
    </div>
</div>

let args = {
    parentElt: 'slider',
    height: '20rem',
    width: '60%',
    slideSpeed: '0.5s',
    prevText: '<img src="images/next.png" style="transform: rotate(180deg);">',
    nextText: '<img src="images/next.png">',
};
let mySlider = new Slider2(args);

cette classe ajoute automatiquement le style des conteneurs et des différentes slides, ainsi que la navigation du slider. Pour l'animation, j'ai crée une méthode qui retourne la position de la div qui contient les sliders et une autre censé modifier la position de cette div en fonction de sa position initiale.

/* Methode qui retourne le position */
get position() {
    return this.slidesPos();
}

slidesPos() {
    return parseInt(window.getComputedStyle(this.slides).left);
}

/* Methode de l'animation */

animateSlides(dir) {
    this.position;
    if(dir === 'right'){
        this.slides.style.left = (this.position - 100) + '%';
    } else {
        this.slides.style.left = (this.position + 100) + '%';
    }
}

Voici mon probleme :

lorsque j'ajoute l'écoute de l'événement click sur l'un des boutons avec la méthode d'animation en callback l'événement n'est pas pris en compte (la slide change automatiquement)

/* this.next est le bouton "suivant" */
this.next.addEventListener('click', this.animateSlides('right'));

et lorsque j'ajoute cette methode d'animation dans une fonction anonyme

this.next.addEventListener('click', function(){
    this.animateSlides('left');
});

la console me retourne cette erreur :

TypeError: this.animateSlides is not a function

J'ai fais pas mal de recherche, mais rien n'a été très concluant... Si vous savez comment m'aider je suis preneur

merci d'avance

PS : pour le programme complet allez voir sur mon github

-
Edité par Molotow 7 juillet 2018 à 17:45:46

Essaie ceci :

this.next.addEventListener('click', () => {
  this.animateSlides('right');
});

-
Edité par SpaceIn 8 juillet 2018 à 21:05:17

SpaceIn a écrit:

Essaie ceci :

this.next.addEventListener('click', () => {
  this.animateSlides('right');
});

-
Edité par SpaceIn 8 juillet 2018 à 21:05:17

Salut dsl pour mon temps de réponse,

je n'ai plus d'erreur dans la console, merci beaucoup

Si j'ai bien compris c'était à cause de la syntaxe js que j'utilisais ?

Molotow a écrit:

Si j'ai bien compris c'était à cause de la syntaxe js que j'utilisais ?

En fait il faut savoir que 'this' fait référence à la fonction anonyme elle même si tu utilises la syntaxe js standard : function (){}. Avec les fonctions fléchées ou Arrow function de la syntaxe es6, 'this' fera toujours référence à la classe dans laquelle cette fonction est implémentée.

Maestro31 a écrit:

Molotow a écrit:

Si j'ai bien compris c'était à cause de la syntaxe js que j'utilisais ?

En fait il faut savoir que 'this' fait référence à la fonction anonyme elle même si tu utilises la syntaxe js standard : function (){}. Avec les fonctions fléchées ou Arrow function de la syntaxe es6, 'this' fera toujours référence à la classe dans laquelle cette fonction est implémentée.

OK merci, je comprends mieux maintenant