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

[kalon-robson]

Hi @jacobsfletch, do you need me to make any changes/improvements to get this merged?

Kind Regards,
Kalon Robson

[jacobsfletch]

Hey @kalon-robson,

I'm failing to understand how this would achieve infinite scroll. Unless I'm misunderstanding something here, how you currently have it written duplicates all slides once over. This would mean that it would still reach them end of the marquee, but would just take twice as long to get there.

Instead, don't we need to to run an effect every time a slide enters the slide container? This way there is an off-frame clone of every visible slide that is continually changing, effectively achieving an infinite set of slides. Then once the slide exits the frame, its clone should be removed.

Thoughts?

[jacobsfletch]

marquee is already a boolean and so it doesn't need to be cast here.

[jacobsfletch]

sliderTrackRef and scrollSnap are unnecessary dependencies.