Svelte control slides from other component

[TheZoker]

Hi there,

I have the following structure:

<main>
  <div class="content">
    <div class="wrapper">
      <Swiper
        slidesPerView={1}
        spaceBetween={50}
        autoHeight
        on:slideChange={() => console.log('slide change')}
        on:swiper={setSwiper}
      >
        <SwiperSlide>
          <Selector id="projects"></Selector>
        </SwiperSlide>
        <SwiperSlide>
          <Selector id="services"></Selector>
        </SwiperSlide>
      </Swiper>
    </div>
  </div>
  <Menubar></Menubar>
</main>

Now I want to have buttons within the <Menubar> component, that when clicked swipe to the next slide or the prev slide.

I already tried to use a variable swiper and pass the functions as params to the <Menubar> item, like <Menubar next={swiper.slideNext}>...

But since swiper is not defined, when the Menubar item gets initialized, that does not work.

Is there any nice way to do this?
So allow another component to control the swiper instance?
Thanks!

[pavelstianko]

Need exactly the same! Hope that someone will help with this