Mantine Carousel custom thumbnails and controls

[paper turret]

Is it possible to add custom thumbnails to the carousel, when user clicks the thumbnail corresponding carousel item should be shown?

[shadow badge]

Yes. I’ve done that for YT embeds, it shows a Thumbnail with a play button then swaps to the iframe upon click.

[paper turret]

Hi, could you provide any example or the sandbox? I couldn't find any documentation for this issue

[shadow badge]

My code is custom to my implementation. You need to give me more context for what you’re trying to do.

For example I don’t refresh the page so I had to use a embla.scrollTo to reset the current slide.

It’s not that complicated otherwise.

[paper turret]

import React, {useState} from 'react';
import {Carousel} from '@mantine/carousel';
import {Button, Group, Image, Text} from "@mantine/core";
import Banner from "../../assets/banner_1.png"

export const CategoryCarousel = () => {
const [activeSlide, setActiveSlide] = useState(0);

const handleThumbnailClick = (index) => {
    setActiveSlide(index);
};

return (
    <>
        <Carousel key={activeSlide} withControls withIndicators initialSlide={activeSlide}>
            <Carousel.Slide>
                <Image src={Banner} alt="banner" />
            </Carousel.Slide>
            <Carousel.Slide>
                <Text>2</Text>
            </Carousel.Slide>
            <Carousel.Slide>
                <Text>3</Text>
            </Carousel.Slide>
        </Carousel>

        <Group>
            <Button onClick={() => handleThumbnailClick(0)}>1 slide</Button>
            <Button onClick={() => handleThumbnailClick(1)}>2 slide</Button>
            <Button onClick={() => handleThumbnailClick(2)}>3 slide</Button>
        </Group>
    </>
);

}

Here's a little sample, when user clicks the buttons the slide items should be shown, right now i'm trying to do it with initialSlide prop of the Carousel, but the issue is that when button is clicked carousel item should be swapped to the corresponding item

right now it is also working but without a sliding animation in carousel, it is instantly showing the items when thumbnail is clicked, without sliding animation it looks like just a tab component not a carousel

[shadow badge]

So you want the carousel to scroll to the correct slide when clicking on a separate button?

const [embla, setEmbla] = useState();

embla?.scrollTo(activeSlide);

<Carousel
getEmblaApi={setEmbla}
>

That should do it, if I understood you correctly.