Carousel with thumbnails

[sadovojav]

How to make carousel with thumbnails. Is it possible?

[jramiroz98]

Working on doing so atm

[shyakadavis]

@jramiroz98 If you manage to land it, please let us know.

A while back, I tried my luck, failed, and asked for help here: davidjerleke/embla-carousel#809, but haven't heard anything back.

[jramiroz98]

Hope this works for you!

<script lang="ts">
import * as Carousel from '$lib/components/ui/carousel/index';
import { type CarouselAPI } from '$lib/components/ui/carousel/context.js';

let api: CarouselAPI;

let currentImage = 0;
$: if (api) {api.scrollTo(currentImage); }
</script>

<Carousel.Root
	bind:api
	opts={{
		loop: true
	}}
		>
			<Carousel.Content>
				{#each product.imgs as img}
					<Carousel.Item class="h-[30rem] w-full"
						><img src={getImageURL(img)} alt={product.name} /></Carousel.Item
					>
				{/each}
			</Carousel.Content>
			<Carousel.Previous />
			<Carousel.Next />
		</Carousel.Root>
		<div class="my-4 ml-2 flex space-x-4">
			{#each product.imgs as img, i}
				<button class="h-14 w-14 object-cover {currentImage == i ? 'outline outline-2 outline-offset-2 outline-slate-600 rounded-sm' : ''}" on:click={() => (currentImage = i)} >
					<img src={getImageURL(img)} alt={product.name} class="rounded-sm"/>
				</button>
			{/each}
		</div>

[jramiroz98]

I missed the update when carousel is being scrolled, fixed below:

<script lang="ts">
import * as Carousel from '$lib/components/ui/carousel/index';
import { type CarouselAPI } from '$lib/components/ui/carousel/context.js';

let api: CarouselAPI;

let currentImage = 0;
$: if (api) {
    api.scrollTo(currentImage); 
    api.on('select', () => {
	currentImage = api.selectedScrollSnap();
	});
    }
</script>

<Carousel.Root
	bind:api
	opts={{
		loop: true
	}}
		>
	<Carousel.Content>
		{#each product.imgs as img}
			<Carousel.Item class="h-[30rem] w-full"
				><img src={getImageURL(img)} alt={product.name} /></Carousel.Item
			>
		{/each}
	</Carousel.Content>
	<Carousel.Previous />
	<Carousel.Next />
</Carousel.Root>

<div class="my-4 ml-2 flex space-x-4">
	{#each product.imgs as img, i}
		<button class="h-14 w-14 object-cover {currentImage == i ? 'outline outline-2 outline-offset-2 outline-slate-600 rounded-sm' : ''}" on:click={() => (currentImage = i)} >
			<img src={getImageURL(img)} alt={product.name} class="rounded-sm"/>
		</button>
	{/each}
</div>