I'm tackling a problem differently today compared to yesterday, but my knowledge of jQuery and JavaScript is quite basic.
My goal is to increment the transform value of a div every 5 seconds:
<div style="transform: translateX(0px);" id="slide_images">
...
</div>
I've come up with this jQuery code to achieve that, but I'm struggling on getting the showpixels value to work in the HTML:
jQuery(document).ready(function($) {
$(document).ready(function(){
var pixelArr = ['-1100px','-2200px','-3300px','-4400px'],
counter = 0,
timer = setInterval(function(){
pixelTimer(pixelArr[counter]);
counter++
if (counter === pixelArr.length) {
clearInterval(timer);
}
}, 5000);
function pixelTimer(showpixels) {
$("#slide_images").css("transform", "translateX(showpixels)");
}
});
});
It seems like a simple issue, but I seem to be struggling. In essence, I want to decrease the line style="transform: translateX(0px);" in the HTML by -1100px every 5 seconds. Any assistance would be appreciated!