Carousel controls enhancements

[kimfucious]

Your new carousel is great; however, there's a couple of things that would be nice to add as features.

At present, the controls are "on top of" the slides. This requires some work to get contrast right, .esp when the slides are images.

It would be nice if there were an option to put the controls were "around" the slides so as to obviate having to deal with this.

I've tried using various settings of the align prop, but it doesn't seem to help here.

Also, it seems (and I can be 100% wrong here) that there is no way to trigger any forward/back except for with the given controls.

What I mean is, it would be nice to allow independent buttons to control the carousel.

For example the back/forward controls in the screen shot (from this site) below control the carousel, independently.

Yes, I could probably get this done in some other way, but I'm lazy and think that others would benefit from your implementation of carousel being able to have this feature.

[kimfucious]

Okay, I dug a little deeper and found that using the embla instance helps here.

    const [embla, setEmbla] = useState<Embla | null>(null);
    const onPrevButtonClick = useCallback(() => {
        if (!embla) return;
        embla.scrollPrev();
    }, [embla]);

    const onNextButtonClick = useCallback(() => {
        if (!embla) return;
        embla.scrollNext();
    }, [embla]);

Before that can work, you need to get Embla in the Carousel component:

 <Carousel getEmblaApi={setEmbla} ... />

Then you can use those methods on controls anywhere embla can be found:

 <Group align="center" gap={0} justify="flex-end" w={"100%"}>
    <ActionIcon
        color="gray"
        onClick={() => onPrevButtonClick()}
        radius={"xl"}
        size={"lg"}
        variant="subtle"
    >
        <BiChevronLeft />
    </ActionIcon>
    <ActionIcon
        color="gray"
        onClick={() => onNextButtonClick()}
        radius={"xl"}
        size={"lg"}
        variant="subtle"
    >
        <BiChevronRight />
    </ActionIcon>
</Group>