Closed AnaisLT closed 2 years ago
Hi @AnaisLT,
Thank you for your bug report. The problem with the buttons being active/inactive is happening because you don't update their states properly. This should work as intended:
const updatePrevNextButtonState = useCallback(() => {
if (!embla) return;
setPrevBtnEnabled(embla.canScrollPrev());
setNextBtnEnabled(embla.canScrollNext());
}, [embla]);
useEffect(() => {
if (!embla) return;
embla.on("select", updatePrevNextButtonState); // Set button states when the selected snap changes
updatePrevNextButtonState(); // Set button states when the carousel mounts
}, [embla, updatePrevNextButtonState]);
Regarding the containScroll option I think you might be misunderstanding what it does:
Clear leading and trailing empty space that causes excessive scrolling. Use
trimSnaps
to only use snap points that trigger scrolling orkeepSnaps
to keep them.
Please take a moment and watch the screen recording below. containScroll
will clear leading and trailing space. It will override slide alignments at the beginning and/or the end of the carousel if needed, in order to clear the space and cut any excessive scrolling. It's important that you follow the currentIndex
which might bring some clarity on what it actually does.
And another thing:
const [viewportRef, embla] = useEmblaCarousel({
align: selectedIndex ? "center" : "start", // You might not want to do this
containScroll: "trimSnaps"
});
Any changes in options will trigger a hard reset of the carousel. So be sure that you actually want the carousel to stop scrolling and reset with its new options here.
Best, David
Hi David,
Thank you so much for your prompt reply. This is super helpful.
Best, Anais
@AnaisLT did it solve the problem?
Best, David
Bug is related to
embla-carousel-react
Embla Carousel version
Describe the bug
We're trying to implement one carousel that gets provided a default value from a schema and needs to be centred, and another carousel that doesn't get passed a default value and needs to be left aligned.
When using keepSnaps, the carousel centres the slide properly but the button arrow doesn't get disabled which means that it isn't evident that you can select the last slide or can't select the last slide (1) Same issue with the first slide.
When using trimSnaps, the button arrows get disabled when expected but we can't centre slides properly (2)
CodeSandbox
Steps to reproduce
On (1) that uses keepSnaps
Select a slide to see it centred
Scroll down to the end of the carousel
The button arrow should show as still enabled
On (2) that uses trimSnaps
Select a slide, the carousel will not centre the slide
But the button arrows are disabled when expected
Expected behavior