1

I don't understand why when the function has to show a counter it works and if I ask her to translate an element she translate it only once.

This is the code, I tried a lot but I can't find a solution:

var i; //  set your counter to 1
var numberOfImages = document.getElementsByClassName("imgs").length;
var imgWidth = window.innerWidth;
    
console.log(numberOfImages);
    
var startIt = setInterval(function() {
    document.getElementById("carouselTrain").style.transform = "translateX(" + -imgWidth + "px)";
    document.getElementById("carouselTrain").style.transitionDuration = "0.5s";
    document.getElementById("carouselTrain").style.transform = "translateX(" + -imgWidth + "px)";
    document.getElementById("carouselTrain").style.transitionDuration = "0.5s";        
}, 1000);
Rainbow
  • 6,772
  • 3
  • 11
  • 28
matte rez
  • 33
  • 4

1 Answers1

1

The problem is that you are translating by the same value every time. Translating doesn’t accumulate which is why you’re not seeing any changes.

If you update the value of imgWidth in the set interval function you’ll start to see some action. Do this at the bottom of the setInterval function:

imgWidth += imgWidth
Dan Mullin
  • 4,285
  • 2
  • 18
  • 34
  • I really waited an answer, it works perfectly, thanks! If someone reading this an has the same problem, I suggest you to create another variable like imgIncrementedWidth and do imgIncrementedWidth += imgWidth. That's because if you re-assign the same variable it go double every time. (sorry if my english's not good) – matte rez Sep 19 '20 at 08:35