carousel - transitionend method to animate a infinite slider with vanilla Javascript -

i'm new community , first of all, take opportunity thank of wonderful work every day.

i'm trying create infinite manual carousel, in netflix style, link codepen of have done far: https://codepen.io/a12584r/pen/ojvwyp?fref=gc

here relevant javascript:

    let prendicontenitoregalleria = document.queryselector('.contenitore-galleria'),     prendiarticle = array.prototype.slice.apply(document.queryselectorall('.contenitore-galleria__article')),     contaarticle = prendiarticle.length,     prendiimmagini = array.prototype.slice.apply(document.queryselectorall('.contenitori__img')),     prendifrecciasinistra = document.queryselector('.freccia-sinistra'),     prendifrecciadestra = document.queryselector('.freccia-destra'); prendicontenitoregalleria.style.width = 100 * contaarticle + '%'; (let numeroimmagini = 0; numeroimmagini < prendiimmagini.length; numeroimmagini++) {     prendiimmagini[numeroimmagini].style.width = 100 / contaarticle + '%'; } prendicontenitoregalleria.insertbefore(prendiarticle[contaarticle - 1], prendiarticle[0]); prendicontenitoregalleria.style.marginleft = '-' + 100 + '%'; function andareadestra () {     prendicontenitoregalleria.style.marginleft = '-' + 200 + '%';     prendicontenitoregalleria.style.transitionduration = '.7s';     prendicontenitoregalleria.addeventlistener('transitionend', function(e) {         prendicontenitoregalleria.appendchild(prendiarticle[0]);         prendicontenitoregalleria.style.marginleft = '-' + 100 + '%';     }, false); } function andareasinistra () {     prendicontenitoregalleria.style.marginleft = 0;     prendicontenitoregalleria.style.transitionduration = '.7s';     prendicontenitoregalleria.addeventlistener('transitionend', function(e) {         prendicontenitoregalleria.insertbefore(prendiarticle[contaarticle - 1], prendiarticle[0]);         prendicontenitoregalleria.style.marginleft = '-' + 100 + '%';     }, false); } prendifrecciasinistra.addeventlistener('click', function () {     andareasinistra(); }); prendifrecciadestra.addeventlistener('click', function () {     andareadestra(); }); 

i have tried use vanilla javascript transitionend events , want achieve when clicking on right arrow of carousel first article put in place of third , vice versa, when clicking on left arrow of carousel last article put in place of first one.

for purpose use marginleft move between articles in carousel 3 , divs contains them (these 3 too) has width of 300% set via javascript.

my problem when click on carousel arrows, transition done strange effect coming original location immediately.

any 1 of me figure out i'm wrong , how can fix it?

in 2 functions move left , right, andareasinistra , andareadestra adding event listener transitionend event.

the handler removing margin-left offset resetting -100% after each move left or right.

you can confirm problem editing inline style of id="contenitore-galleria" element, if set style="margin-left: 0" carousel moved, returned -100% position.

so reason happening because explicitly telling to! delete lines both andareasinistra , andareadestra

rendicontenitoregalleria.style.marginleft = '-' + 100 + '%';