fix: glitch

spa/src/components/ProductImageSwiper.vue

@@ -1,4 +1,5 @@
 <template>
+  <div class="aspect-w-4 aspect-h-3">
     <swiper
         :style="{
       '--swiper-navigation-color': '#fff',
@@ -8,7 +9,7 @@
         :pagination="pagination"
         :navigation="true"
         :modules="modules"
-      class="mySwiper"
+        class="mySwiper w-full min-h-[200px]"
     >
       <swiper-slide v-for="image in images">
         <img
@@ -21,6 +22,8 @@
         ></div>
       </swiper-slide>
     </swiper>
+  </div>
+
 </template>
 
 <script>

spa/src/views/Product.vue

@@ -1,15 +1,7 @@
 <template>
   <div>
     <div>
-      <div class="carousel" ref="carouselRef" @scroll.passive="onScroll">
-        <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>
+      <ProductImageSwiper :images="product.images"/>
 
       <!-- 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>