Hi, I am trying to figure out how to build a carousel. And I want to make it start over with a smooth transition and for that, I need to copy the first slide to the back and the last slide to the front.
I managed to clone the slides but I have a few problems.
I can see my elements when I console.log but the user can’t see them. I have 3 slides and with the clones, I should have 5 but that isn’t the case. When I get to the last slide an error fires in the console saying that it can not read the code that moves the track.
track.style.transform =‘translateX(-’+ targetSlide.style.left +’)’;
The clones are added last. And when I am trying to push the last slide to the front another error fires that is saying that track.push(lastSlideCopy) is not a function.
I have some weird interaction where the middle slide is too small or the next button and prev button don’t work as they should. Works only 1 of them or prev goes to the last slide and next goes to the first etc. But if I refresh the page everything goes to normal.
Here is the CodePen: https://codepen.io/raul-rogojan/pen/BXoWBq?editors=0010