[Help]: How to grab the content in the active/current slide from a different component file?

[shyakadavis]

Summary

Hello 👋

I have a use case, whereby I am looping over an array of images, but I wanted to grab the currently visible image, to be used in a different component file. I want this to be reactive, and by that I mean that if a new slide with a new image enters into view, it should update where it is being referenced.

My thinking was using Svelte stores for keeping track of the current image, but I'm not sure how to go about this.

I appreciate the help.

If applicable, which variants of Embla Carousel are relevant to this question?

• embla-carousel (Core)
• embla-carousel-react
• embla-carousel-vue
• embla-carousel-svelte
• embla-carousel-autoplay
• embla-carousel-auto-scroll
• embla-carousel-solid
• embla-carousel-auto-height
• embla-carousel-class-names
• embla-carousel-docs (Documentation)
• embla-carousel-docs (Generator)

Additional information

No response

CodeSandbox example

No response

[davidjerleke]

Hi @shyakadavis,

Thank you for your question. For the Embla side of things you need to know what slides are in view, and that's easy:

<script>
  import emblaCarouselSvelte from 'embla-carousel-svelte'

  let emblaApi

  function setSlideInViewToStore(emblaApi) {
    // Returns slide indexes in view in an array format --> Example [3] 
    // NOTE that slide index 3 actually means slide nr. 4 because slide 1 has index 0
    const slidesInView = emblaApi.slidesInView() 
  }

  function onInit(event) {
    emblaApi = event.detail

    emblaApi.on('slidesInView', setSlideInViewToStore) // Update store when slides enter/leave view
    setSlideInViewToStore(emblaApi) // Set store on init
  }
</script>

<div class="embla" use:emblaCarouselSvelte on:emblaInit="{onInit}">...</div>

For the Svelte side of things, you can check how shadcn-svelte work with stores here.

Best,
David

[shyakadavis]

Wow. Thank you very much for the help, @davidjerleke

Actually, I am grateful for the shadcn-svelte link. I had submitted a P.R to expose some functions and stores, and you just reminded me that I forgot to initialize the scrollSnapsStore on init. Will send a follow-up P.R to fix after this. 🙇

As for the answer to my use case, let me document it here for anyone who might run into this in the future, and/or if you know of a way to optimize that I might have forgotten. (⚠️ I'm using shadcn-svelte, as always 🙂)

---

1. I created a store that will hold the actual indices of the slides in view.

export const current_embla_slides = writable<number[]>([]);

2. From David's clear guidance, I set up the necessary events in carousel.svelte

// ...
	function onInit(event: CustomEvent<CarouselAPI>) {
		api = event.detail;
		// ...
		current_embla_slides.set(api.slidesInView()); // Set store on init
		api.on('slidesInView', (api) => current_embla_slides.set(api.slidesInView())); // Update store when slides enter/leave view
	}

3. And finally, in my component file, some logic to display the current image.

<script lang="ts">
	import { carousel_data } from '$lib/db';
	import { current_embla_slides } from '$lib/stores';

	/**
	 * Get the index of the current slide in the carousel
	 * @description `current_embla_slides` is an array of the indexes of the slides in view.
	 * If the length of the array is 2, return the first slide index.
	 * If the length of the array is 0, return 0.
	 */
	function index_carousel_data(): number {
		return $current_embla_slides.length === 2
			? $current_embla_slides[0]
			: $current_embla_slides.length === 0
				? 0
				: $current_embla_slides[0];
	}

	let current_poster = carousel_data[index_carousel_data()].poster; // state variable to hold the current poster

	// if the poster changes, update the current_poster variable
	current_embla_slides.subscribe(() => {
		current_poster = carousel_data[index_carousel_data()].poster;
	});
</script>

<div
	aria-hidden="true"
	class="pointer-events-none absolute inset-0 -z-10 max-h-svh select-none bg-gradient-radial from-transparent to-background backdrop-blur-3xl"
></div>
<enhanced:img
	aria-hidden="true"
	src={current_poster}
	alt="Dune"
	class="pointer-events-none absolute inset-0 -z-20 h-[90svh] select-none object-cover object-bottom"
/>

---

Once again, thanks for the help, @davidjerleke

P.S. Please let me know if you see a better way to do/optimize this. 🙂

---

P.P.S This way my use case. I wanted a glowed out version of my current slide image in the background.

e3b0b2b1-8016-46f5-8e0b-6a797664bc09.mp4

[davidjerleke]

@shyakadavis glad you got it sorted 🎉!

Thanks for sharing your solution. It can be useful for devs looking to achieve similar things 🙂.