fix: glitch

spa/src/components/ProductImageSwiper.vue

@@ -1,26 +1,29 @@
 <template>
-  <swiper
+  <div class="aspect-w-4 aspect-h-3">
-      :style="{
+    <swiper
+        :style="{
       '--swiper-navigation-color': '#fff',
       '--swiper-pagination-color': '#fff',
     }"
-      :lazy="true"
+        :lazy="true"
-      :pagination="pagination"
+        :pagination="pagination"
-      :navigation="true"
+        :navigation="true"
-      :modules="modules"
+        :modules="modules"
-      class="mySwiper"
+        class="mySwiper w-full min-h-[200px]"
-  >
+    >
-    <swiper-slide v-for="image in images">
+      <swiper-slide v-for="image in images">
-      <img
+        <img
-          :src="image.url"
+            :src="image.url"
-          :alt="image.alt"
+            :alt="image.alt"
-          loading="lazy"
+            loading="lazy"
-      />
+        />
-      <div
+        <div
-          class="swiper-lazy-preloader swiper-lazy-preloader-white"
+            class="swiper-lazy-preloader swiper-lazy-preloader-white"
-      ></div>
+        ></div>
-    </swiper-slide>
+      </swiper-slide>
-  </swiper>
+    </swiper>
+  </div>
+
 </template>
 
 <script>

spa/src/views/Product.vue

@@ -1,15 +1,7 @@
 <template>
   <div>
     <div>
-      <div class="carousel" ref="carouselRef" @scroll.passive="onScroll">
+      <ProductImageSwiper :images="product.images"/>
-        <div v-for="image in product.images" class="carousel-item w-full">
-          <img
-              :src="image.url"
-              class="w-full"
-              loading="lazy"
-              :alt="image.alt" />
-        </div>
-      </div>
 
       <!-- Product info -->
       <div class="mx-auto max-w-2xl px-4 pt-3 pb-16 sm:px-6 lg:grid lg:max-w-7xl lg:grid-cols-3 lg:grid-rows-[auto_auto_1fr] lg:gap-x-8 lg:px-8 lg:pt-16 lg:pb-24">
@@ -52,6 +44,7 @@ import {useHapticFeedback} from 'vue-tg';
 import ProductOptions from "../components/ProductOptions/ProductOptions.vue";
 const hapticFeedback = useHapticFeedback();
 import {useCartStore} from "../stores/CartStore.js";
+import ProductImageSwiper from "../components/ProductImageSwiper.vue";
 
 const route = useRoute();
 const router = useRouter();

spa/src/views/ProductsList.vue

@@ -14,9 +14,7 @@
 
       <div v-if="products.length > 0" class="grid grid-cols-2 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
         <RouterLink v-for="product in products" :key="product.id" class="group" :to="`/product/${product.id}`">
-
           <ProductImageSwiper :images="product.images"/>
-
           <h3 class="mt-4 text-sm">{{ product.name }}</h3>
           <p class="mt-1 text-lg font-medium">{{ product.price }}</p>
         </RouterLink>