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.
track.style.transform = 'translateX(-'+ targetSlide.style.left +')';
Here is the CodePen: https://codepen.io/raul-rogojan/pen/BXoWBq?editors=0010
Solved! Solved! Go to Solution.
re: 2. There is no "push". You must use the insertBefore() method, i.e. this:
You won't need the extra 'appendChild' of the lastSlideCopy after using the above.
Things work much better with this corrected.
re: 1. After the above fix, I look at the console.Log(track) results, this is what I see:
Note the first (clone) slide has no "left" style, as does the last (clone). cloneNode is not cloning the style, and thus the error. This has some more in-depth info which might help your next steps.
Please follow-up to let us know how you made out. For good karma, mark a reply as the answer if it helped!