Skip to content

Auto Scroll function #161

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.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

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