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();
},