javascript - Show jquery value in HTML -

i'm approaching problem had yesterday different angle jquery/js skills basic least.

i have div want increase transform value of every 5s:

<div style="transform: translatex(0px);" id="slide_images">     ... </div> 

and using jquery code attempt can't work out how showpixels value work in 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)");         }     }); }); 

i know simple reason brain having hard time this. put want change style="transform: translatex(0px);" line in html decrease -1100px every 5 seconds. please!

$("#slide_images").css("transform","translatex(showpixels)"); //just string 

should

$("#slide_images").css("transform","translatex(" + showpixels + ")"); //using numbers