svelte-carousel in modal pop-up

[frigeky00]

Hi,

Sorry for the newbie question: I have a svelte website that was built for me, and I'm trying to tweak it to include a carousel in a modal pop-up. So my knowledge is limited and I am trying to get by.

So far, I have followed this tutorial to build up a simple carousel on a page of the website and it works fine.I have also built a modal pop-up, the original version of which simply contained images and text. I deleted the images and text, and wanted to have the carousel display there instead.

In <script>, I include:

import ModalCarousel from '$lib/ui/ModalCarousel.svelte'; //modal pop-up for the carousel
import Carousel from '$lib/ui/carousels/SvelteCarousel.svelte'; //carousel itself

And later in the page's code (just under the first modal window, which I have not removed), I include:

<ModalCarousel bind:showModal>
	<div class="modal-container">
		<div class="content">
   			<Carousel />
		</div>
	</div>
</ModalCarousel>

However, when I run dev and the modal pop-up displays, it flickers:

Recording.mov

Any idea what I am doing wrong?
Thanks in advance!
Phil
PS: FYI, I did install svelte-carousel as a dev dependency but could not do the following steps. (I got an error message when I ran dev telling me that I could not include "export default defineConfig({" in vite.config.js because I already had "export default config;" in it, and when I removed that, I got an error message about the "vite: {" element added to svelte.config.js).

[frigeky00]

Any ideas?

[Techthy]

I followed the same tutorial and for me just running npm install svelte-carousel was the trick, I did no mess around with the configs at all. So maybe give that another shot?