diff --git a/src/SliderProvider/context.tsx b/src/SliderProvider/context.tsx index 2cff568..9e53a64 100644 --- a/src/SliderProvider/context.tsx +++ b/src/SliderProvider/context.tsx @@ -20,6 +20,7 @@ export interface ISliderContext extends Omit { isPaused?: boolean setIsPaused: (is: boolean) => void // eslint-disable-line no-unused-vars isDragging: boolean + marquee: boolean } export const SliderContext = createContext({} as ISliderContext); diff --git a/src/SliderProvider/index.tsx b/src/SliderProvider/index.tsx index 378819f..f67a1f7 100644 --- a/src/SliderProvider/index.tsx +++ b/src/SliderProvider/index.tsx @@ -218,6 +218,7 @@ const SliderProvider: React.FC = (props) => { pauseOnHover, alignLastSlide, isDragging, + marquee: Boolean(marquee), id }; diff --git a/src/SliderTrack/index.tsx b/src/SliderTrack/index.tsx index 742c1ec..e1e4ec9 100644 --- a/src/SliderTrack/index.tsx +++ b/src/SliderTrack/index.tsx @@ -21,12 +21,14 @@ const SliderTrack: React.FC = (props) => { sliderTrackRef, setScrollRatio, slideWidth, + slidesToShow, scrollable, scrollSnap, setIsPaused, pauseOnHover, alignLastSlide, isDragging, + marquee, autoPlay, id: idFromContext, } = sliderContext; @@ -59,6 +61,34 @@ const SliderTrack: React.FC = (props) => { getScrollRatio, ]); + // NOTE: adds infinite scroll when marquee is enabled + useEffect(() => { + const track = sliderTrackRef.current; + if (marquee && track) { + const clones = track?.querySelectorAll('.marquee-clone'); + clones?.forEach(clone => clone.remove()); + + const firstSlide = track.firstElementChild; + if (firstSlide) { + let selectedSlide = firstSlide + + for (let i = 0; i < slidesToShow; i++) { + if (i !== 0) { + selectedSlide = selectedSlide.nextSibling as HTMLElement; + } + + const clone = selectedSlide.cloneNode(true) as HTMLElement; + clone.style.width = `${100 / slidesToShow}%`; + clone.classList.add('marquee-clone'); + + if (clone) { + track.appendChild(clone); + } + } + } + } + }, [sliderTrackRef, marquee, scrollSnap, slidesToShow]); + // NOTE: handle updates to the track's current scroll, which could originate from either the user or the program useEffect(() => { const track = sliderTrackRef.current;