swiper.slideNext() not working

I have a swiper slider which works fine either by using swiper-init class or onPageInit in component page.

ISSUE

I have a button “Getting Started” that once clicked it should move to the next slide, but this does not work.

WHAT I HAVE TRIED

I have tried using dom7 to initiate an onclick event in the inline js, but this does not work.

<script>
    return {
       mounted(){
            const self = this;
            const app = self.$f7;

            // var $$ = self.$Dom7;

            // self.$ or self.$$ or self.$dom7 (Working code...)

            // $$ = self.$dom7;

            var swiper = app.swiper.create('.swiper-container', {
              speed: 400,
              spaceBetween: 0
            });

            $$("#ob-one").on("click",function(){

              swiper.slideNext();

            });

Note: see image and code below.

COMPONENT PAGE (HOME.HTML)

<div class="swiper-slide">
          <div class="block">
            <div class="row resizable">
              <div class="col-100">
                <center>
                  <img class="onboarding-customer-destination-two" src="assets/user/customer-destination-two.png" alt="Customer Destination">
                </center>
              </div>
            </div>
          </div>
          <div class="block">
           <div class="row resizable">
            <div class="col-100">
              <h6 class="order-text josefin-sans-bold-font">ORDER</h6>
              <h6 class="order-desc josefin-sans-light-font">Order for our service from your location with no stress</h6>
            </div>
          </div>
        </div>
        <div class="block">
          <div class="row resizable">
            <div class="col-100">
              <center>
                <a id="ob-one" href="#" class="getting-started-button josefin-sans-bold-font" onclick="app.methods.obOne()">
                  Get Started <i class="oba-icon f7-icons size-18">arrow_right</i>
                </a>
              </center>
              <!--  -->
            </div>
          </div>
        </div>
      </div>

INLINE JS

<script>
  return {
    // Component Data
    data: function () {
      // Must return an object
      return {
        name: 'Jimmy',
        age: 25,
        like: ['Tennis', 'Chess', 'Football'],
      }
    },
    // Component Methods
    methods: {
      openAlert: function () {
        var self = this;
        self.$app.dialog.alert('Hello World');
      },
    },
    on: {
      pageInit: function (page) {

        const self = this;
        $$ = self.$dom7;

        var swiper = app.swiper.create('.swiper-container', {
              speed: 400,
              spaceBetween: 0
            });
      }
    },
  }
</script>

APP.JS METHOD

methods: {
    /* GUEST ONBOARDING METHODS */
    obOne: function(){

      swiper = app.swiper.get('.swiper-container');

      swiper.slideNext();

    },
    obTwo: function(){
      swiper.slideNext();
    },
    obThree: function(){
      swiper.slideNext();
    },

Any errors in console?

It does not display any console errors, but it dos not slide next.

NOTE: I HAVE CHANGED IT FROM CALLING THE ONCLICK EVENT HANDLER FROM APP.JS
TO INLINE.

<a id="ob-one" href="#" class="getting-started-button josefin-sans-bold-font" @click="obOne">
                  Get Started <i class="oba-icon f7-icons size-18">arrow_right</i>
                </a>

<script>
  // script must return component object
  return {
    mounted () {
    this.getSwiperInstance()
    },
    data: function () {
      return {
        title: 'Component Page',
        names: ['John', 'Vladimir', 'Timo'],
      }
    },
    methods: {
      openAlert: function () {
        var self = this.$app.dialog.alert('Hello world!');
      },
      getSwiperInstance () {
        this.mySwiperInstance = this.$f7.swiper.get('.swiper-container')
      },
      obOne: function(){

        var self = this;
        const app = self.$f7;

        swiper = app.swiper.get('.swiper-container');

        console.log(swiper);

        swiper.slideNext();

      },
      obTwo: function(){

        swiper = this.$app.swiper.get('.swiper-container');

        swiper.slideNext();
      },
      obThree: function(){

        swiper = this.$app.swiper.get('.swiper-container');

        swiper.slideNext();
      },
    },
    on: {
      pageInit: function () {
        // do something on page init
        var self = this;
        const app = self.$f7;

        var $$ = self.$dom7;
        // self.openAlert();

        var swiper = app.swiper.create('.swiper-container', {
          speed: 400,
          spaceBetween: 0
        });

        self.swiper;
      },
      pageAfterOut: function () {
        // page has left the view
      },
    }
  }
</script>

Thi code will not work because mounted happens before pageInit. Assign Swiper instance when you create it

This will have been easier if i understand how to run DOM7 code inside a template/component page, i asked the question here

I changed it to this, but it is not working.

<script>
  // script must return component object
  return {
    data: function () {
      return {
        title: 'Component Page',
        names: ['John', 'Vladimir', 'Timo'],
      }
    },
    methods: {
      openAlert: function () {
        var self = this.$app.dialog.alert('Hello world!');
      },
      obOne: function(){

        var self = this;
        const app = self.$f7;

        swiper = app.swiper.get('.swiper-container');

        console.log(swiper);

        swiper.slideNext();

      },
      obTwo: function(){

        swiper = this.$app.swiper.get('.swiper-container');

        swiper.slideNext();
      },
      obThree: function(){

        swiper = this.$app.swiper.get('.swiper-container');

        swiper.slideNext();
      },
    },
    on: {
      pageInit: function () {
        // do something on page init
        var self = this;
        const app = self.$f7;

        var $$ = self.$dom7;
        // self.openAlert();

        var swiper = app.swiper.create('.swiper-container', {
          speed: 400,
          spaceBetween: 0
        });

        self.swiper;
      },
      pageAfterOut: function () {
        // page has left the view
      },
    }
  }
</script>

Look here https://jsfiddle.net/26rcmgat/ (check About page)

I updated this based on your solution on home.html

https://pastebin.com/StUFnXfN

It returns this

VM836:20 Uncaught TypeError: this.swiper.slideNext is not a function
    at Component.slideNext (<anonymous>:20:23)
    at 0:10366
    at invokeHandler (0:11066)
    at handleEvent (0:11074)
    at HTMLAnchorElement.e (0:11082)
    at HTMLAnchorElement.l (0:1087)

I just copy/pasted your code and it works for me without any errors

It is not working on my end, maybe i can share my code so you can see.

app.js:1250 Uncaught TypeError: swiper.slideNext is not a function
    at t.obOne (app.js:1250)
    at HTMLAnchorElement.onclick ((index):1)

I have updated the code, this is the link https://jsfiddle.net/9bgz7jk5/12/