Solution for _freeModeNoMomentumRelease of Swiper FreeMode using in ionic vue

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]);

1 post - 1 participant

Read full topic