Hello everyone, I have a problem with using swiper version 7 inside ionic vue and I got this warning when using FreeMode. When I slide, that still working well and until I stop the slide constantly when touch for one inside the swiper to stop it. Then I got this warning.
Not still that, when I wanna stop the FreeMode slide by touching the sliding, that has a little wait time until to slow down the speed of freeMode. I don’t know that does it bug?
Here is my Code:
<template>
<ion-list>
<swiper
class="swiper-block-005"
:slides-per-view="1.5"
:space-between="10"
:free-mode="true"
:pagination="true"
@swiper="onSwiper"
>
<template v-if="listItemArray.length > 0">
<template v-for="(item, i) in listItemArray" :key="i">
<swiper-slide>
<ion-card button @click="directSecondPage()">
<div class="wrap-image" :class="imgGotError ? 'ion-margin-bottom' : ''">
<ion-img
v-if="item.image"
:src="item.image"
:alt="item.name"
:style="!imgLoaded ? (Opacity = 0) : (Opacity = 1)"
@ionImgWillLoad="imgIsLoading($event)"
@ionImgDidLoad="imgIsLoaded($event)"
@ionError="imgIsError()"
/>
<template v-if="!imgLoaded">
<ion-skeleton-text animated :style="imgSkeletonLoadingCss" />
</template>
<template v-else-if="imgGotError && imgLoaded">
<div class="not-found">
<div class="fig">Not Found</div>
</div>
</template>
<template v-else-if="!item.image || !item.hasOwnProperty('image')">
<ion-skeleton-text animated style="width: 100%; height: 100%" />
</template>
<ion-badge>
<ion-icon :icon="star" />
{{ item.rate }}
</ion-badge>
</div>
<ion-card-header class="ion-padding-horizontal">
<ion-card-subtitle>{{ item.subtitle }}</ion-card-subtitle>
<ion-card-title>
{{ item.name }}
</ion-card-title>
</ion-card-header>
<ion-card-content class="ion-padding">
<ion-label color="white"> $ {{ item.price }} </ion-label>
<ion-button shape="round" color="orange" size="small">
<ion-icon slot="icon-only" color="white" size="small" :icon="add" />
</ion-button>
</ion-card-content>
</ion-card>
</swiper-slide>
</template>
</template>
<template v-else>
<swiper-slide class="w-100 text-center"> No Information </swiper-slide>
</template>
</swiper>
</ion-list>
</template>
// import Swiper core and required modules
import SwiperCore, { Pagination, A11y, Autoplay, Lazy, FreeMode } from "swiper";
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from "swiper/vue";
// Import Swiper styles
import "swiper/css";
import "swiper/css/a11y";
import "swiper/css/free-mode";
import "swiper/css/grid";
import "swiper/css/mousewheel";
import "swiper/css/virtual";
import "swiper/css/pagination";
SwiperCore.use([IonicSwiper, Pagination, A11y, Autoplay, Lazy, IonicSlides, FreeMode]);
