feat: clone marquee slides for infinite effect

[kalon-robson]

The feature previously snapped to the start when reaching the end, but now the last selected slides are duplicated to create an infinite and seamless effect.

This could be a breaking change for some like me, who have patched this by duplicating the slides manually prior to passing them to the SliderTrack. Due to this, you may want to change this to a toggled feature in the SliderProvider.

[kalon-robson]

Also noticed a bug (potential unexpected feature)

If you only provide 1 slide but set slidesToShow to 10. It will duplicate the single slide and marquee rather than the previous result which would show 1 and not move.

[jacobsfletch]

Hey @kalon-robson!!! This is amazing. I have noticed the same effect before and always wished to the find time to fix it, so THANK YOU. I'll be sure to dive deeper into this as soon as I can.

but now the last selected slides are duplicated to create an infinite and seamless effect.

Can you explain this a little but further? What do you mean by "last selected slides" and also can you describe your method of "duplicating"?

[kalon-robson]

@jacobsfletch I can't even remember why I wrote that. I think I meant to say "the first selection of slides are duplicated to the end". What I'm doing is running a useEffect in SliderTrack that checks to see if marquee is enabled. If so, it will then clone a selection of slides from the start, depending on the number of slidesToShow. Once cloned, it appends them to the track.

If I have 5 slides and slidesToShow is 2 it will take the first two slides and duplicate them onto the end (making the number of slides 7). Then, when it scrolls to the end the view looks identical ready to snap back to the start.

          if (i !== 0) {
            selectedSlide = selectedSlide.nextSibling as HTMLElement;
          }

          const clone = selectedSlide.cloneNode(true) as HTMLElement; <-- this is what I'm using to clone the slide