Svelte Swiper Wizard

1

Hi.

Im trying to create a wizard like process in Svelte and the swiper component. Not sure if swiper is the correct component to use for this, but I dont want to create different pages for each step.

The issue I am having is that if one of the slides have a lot of content which the user needs to scroll down. When I go to the next slide, the second slide content is out of view, in other words, the user needs to scroll back up.
Is there a way to automatically scroll to top on NextSlide?
Or does anyone have another way I can make a wizard interface.

I have tried the below code, but window.scrollTo(0, 0); does not work.

Thank you in advance.

<Page onPageInit={onPageInit}>

  <Navbar title="Wizard" backLink="Back" />

  <Swiper pagination scrollbar>

    <SwiperSlide>

    Slide 1<br/>

    Slide 1<br/>

    Slide 1<br/>

    Slide 1<br/>

    Slide 1<br/>

    Slide 1<br/>

    Slide 1<br/>

    Slide 1<br/>

    Slide 1<br/>

    Slide 1<br/>

    Slide 1<br/>

    Slide 1<br/>

    Slide 1<br/>

    Slide 1<br/>

    Slide 1<br/>

    Slide 1<br/>

    Slide 1<br/>

    Slide 1<br/>

    Slide 1<br/>

    Slide 1<br/>

    Slide 1<br/>

    Slide 1<br/>

    Slide 1<br/>

    Slide 1<br/>

    Slide 1<br/>

    Slide 1<br/>

    Slide 1<br/>

    Slide 1<br/>

    </SwiperSlide>

    <SwiperSlide>Slide 2</SwiperSlide>

    <SwiperSlide>Slide 3</SwiperSlide>

  </Swiper>

  <Button fill raised onClick={() => GoToNextSlide()}>Next Slide</Button>

</Page>

<script>

  import { f7,Page, Navbar,Button, Block,Swiper,SwiperSlide, ListItem } from 'framework7-svelte';

  function onPageInit(pageData) {

  }

  function GoToNextSlide(){

    var swiper = f7.swiper.get('.swiper-container');

    swiper.slideNext();

    window.scrollTo(0, 0);

  }

</script>
2

To points:

  1. Your slides must have set overflow: auto style to have scrolling only within slide
  2. Modify your function like that:
  function GoToNextSlide(){

    var swiper = f7.swiper.get('.swiper-container');

    document.querySelector('.swiper-slide-active').scrollTop = 0;

    swiper.slideNext();

  }