-
Notifications
You must be signed in to change notification settings - Fork 183
Open
Description
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:
- If the user tries to swipe manually, it pulls them back to the previous page. Manually swiping creates scroll issue.
- 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.
SahilBhosale0808
Metadata
Metadata
Assignees
Labels
No labels