Bonjour, 

j'ai créé un slider en javascript où mes trois images défilent de la gauche vers la droite. Jusque là, pas de problème. Cependant, j'aimerais qu'à chaque nouvelle image, l'animation fasse une pause de x secondes, puis reprenne et ainsi de suite pour la troisième images. J'ai essayé d'englober ma fonction 'gaucheDroite' par un SetInterval mais je dois louper quelque chose car au lieu de s'arrêter, l'animation accélère. Je précise que mes images font 1300px de large. J'espère avoir été clair et merci d'avance pour votre aide. Voici mon code

var defilementSlider = document.getElementById('slider');
defilementSlider.style.position = 'relative';
var defilementGauche = 0;
var direction = 1

// fonction pour faire défiler les images de gauche à droite
setInterval(function()
          {
    function gaucheDroite ()
        {
            if (defilementGauche === -2600)
            {
                direction = -1;
            }
            else if (defilementGauche === 0)
            {
                direction = 1
            };
    
            defilementGauche += -5 * direction;
            defilementSlider.style.left = defilementGauche + 'px';
            
            requestAnimationFrame(gaucheDroite);
        };
            requestAnimationFrame(gaucheDroite);
    
}, 4000);

-
Edité par PierreGyn 4 décembre 2018 à 21:15:15

Et si tu essaies ça ?

var defilementSlider = document.getElementById('slider');
defilementSlider.style.position = 'relative';
var defilementGauche = 0;
var direction = 1
 
// fonction pour faire défiler les images de gauche à droite
function gaucheDroite () {
  if (defilementGauche === -2600)
  {
      direction = -1;
  }
  else if (defilementGauche === 0)
  {
      direction = 1
  };

  defilementGauche += -5 * direction;
  defilementSlider.style.left = defilementGauche + 'px';
};


setInterval(function() {
  requestAnimationFrame(gaucheDroite)
}, 4000);

-
Edité par Todostaky 5 décembre 2018 à 13:26:37

Bonjour, 

Alors c'est plus dans ce que je recherche dans le sens ou l'animation s'arrête. Cependant, avec ce code, le défilement de la droite vers la gauche se fait en saccadé, c'est à dire d'un coup sec, alors que je voudrais que l'image glisse jusqu'à -1300px, s'arrête 4 seconde et reprenne jusqu'à l'image suivante. Pour faire plus clair, je voudrais que tous les -1300px, l'animation s'arrête 4 secondes et reprenne automatiquement. Voici mon code html si cela peut vous aider. Et merci beaucoup pour votre aide

<div id="slider">
            <div class="slides">
                <div class="slide1"><img src= "images/test2.jpg" alt="" /></div>
                <div class="slide2"><img src="images/couple-velo2.jpg" alt="" /></div>
                <div class="slide3"><img src="images/velo3.jpg" alt="" /></div>
                <div class="slide4"><img src="images/velo5.jpg" alt="" /></div>
                <div class="slide5"><img src="images/velo6.jpg" alt="" /></div>
            </div>
        </div>

-
Edité par PierreGyn 5 décembre 2018 à 16:02:14

Pour faire simple, en vrai, je ne connais pas cette approche avec requestAnimationFrame().

Si j'étais toi j'utiliserais plutôt une approche différente en mélangeant des animations css3 et des changements de classes avec le js ...

Un autre algo en fait ...

Si quelqu'un connait mieux ta méthode je lui laisse la main volontier.

Edit:

Bon ... après avoir été voir la doc, je te dirais que ton code initial est bon, il te manque juste une condition pour arrêté l'animation dans gaucheDroite. Tu dois avoir un point d'arrêt. Par exemple:

var defilementSlider = document.getElementById('slider');
defilementSlider.style.position = 'relative';
var defilementGauche = 0;
var direction = 1

const imageSize = 1300
const imageNumber = 2

// fonction pour faire défiler les images de gauche à droite
function gaucheDroite () {
  if (defilementGauche = imageSize * imageNumber) {
      direction = -1;
  }

  else if (defilementGauche === 0) {
      direction = 1
  };

  defilementGauche += -5 * direction;
  let before = defilementSlider.style.left
  defilementSlider.style.left = defilementGauche + 'px';
  
  if( Math.abs(before - defilementSlider.style.left) < imageSize ){
    requestAnimationFrame(gaucheDroite);
  }
};
    

requestAnimationFrame(gaucheDroite);

setInterval(function() {
  gaucheDroite()
}, 4000);

Ca doit sûrement être débuggué j'ai pas d'images pour tester et je t'avoue que j'ai un peu la flemme.

Mais c'est l'idée qui est importante.

Tu ne dois pas rappeler systématiquement

requestAnimationFrame

à la fin de ta fonction, sinon ça ne s'arrête jamais et quand tu setInterval ça s'accélère parce que tu rajoutes des animations à l'animation initiale.

Tu dois donc définir un moyen de ne pas le rappeler.

En vrai c'est un peu bancal ce que je propose là, parce que tu setInterval 4 secondes et que ton animation, on ne sait pas combien de temps elle dure.

Il faudrait préféré une condition d'arrêt lié au temps si tu joues avec lui ... bref, à toi de voir, j'espère que c'est un peu plus clair en tout cas.

-
Edité par Todostaky 5 décembre 2018 à 20:25:19