Skip to content

Auto Scroll function #161

@creativeoutlet-ranique

Description

@creativeoutlet-ranique

I just wanted to share that an auto scroll Boolean property would be a great feature to include. It seems like a great way to improve user experience.

Currently this is how I have my auto scroller set, but its still kinda wonky.

`
const onboardingRef = useRef(null); //reference to onboarding component
const [currentIndex, setCurrentIndex] = useState(0);
const [isUserInteracting, setIsUserInteracting] = useState(false); // Track manual swiping
const totalSlides = 5;

useEffect(() => {

    const interval = setInterval(() => {
    if (!isUserInteracting && onboardingRef.current) {
        setCurrentIndex((prevIndex) => {
            const nextIndex = (prevIndex + 1) % totalSlides;
            onboardingRef.current.goToPage(nextIndex, true);
            return nextIndex;
        });
    }
}, 6000);

    return () => clearInterval(interval); // Clean up interval on component unmount
}, [isUserInteracting, currentIndex]);

// Handle manual page change (swipe interaction)
const handlePageChange = (index) => {
    setCurrentIndex(index);
    setIsUserInteracting(true); // Set flag when user interacts

    setTimeout(() => {
        setIsUserInteracting(false); //Allow autoscroling again after 2 seconds delay
    }, 2000);
}; 

`

Issues im having with this:

  1. If the user tries to swipe manually, it pulls them back to the previous page. Manually swiping creates scroll issue.
  2. It cycles back to the first page after reaching the end, but instead of flowing from eg. Page [3] -> Page [0], it flashes through the pages like Page [3] ->Page [2] -> Page [1] -> Page [0] which comes off as glitchy and poor ui

Definitely looking for suggestions on how to improve this scroller as well as sharing my interest in a built in auto scroller as part of this library, thank you.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions