From db24be6f92bbe485985892ea017f4e4ef457cd52 Mon Sep 17 00:00:00 2001
From: Nikita Kiselev <mail@nikitakiselev.ru>
Date: Sun, 20 Jul 2025 22:43:51 +0300
Subject: [PATCH] fix: glitch

---
 spa/src/components/ProductImageSwiper.vue | 41 ++++++++++++-----------
 spa/src/views/Product.vue                 | 11 ++----
 spa/src/views/ProductsList.vue            |  2 --
 3 files changed, 24 insertions(+), 30 deletions(-)

diff --git a/spa/src/components/ProductImageSwiper.vue b/spa/src/components/ProductImageSwiper.vue
index 4cb4edd..06963b9 100644
--- a/spa/src/components/ProductImageSwiper.vue
+++ b/spa/src/components/ProductImageSwiper.vue
@@ -1,26 +1,29 @@
 <template>
-  <swiper
-      :style="{
+  <div class="aspect-w-4 aspect-h-3">
+    <swiper
+        :style="{
       '--swiper-navigation-color': '#fff',
       '--swiper-pagination-color': '#fff',
     }"
-      :lazy="true"
-      :pagination="pagination"
-      :navigation="true"
-      :modules="modules"
-      class="mySwiper"
-  >
-    <swiper-slide v-for="image in images">
-      <img
-          :src="image.url"
-          :alt="image.alt"
-          loading="lazy"
-      />
-      <div
-          class="swiper-lazy-preloader swiper-lazy-preloader-white"
-      ></div>
-    </swiper-slide>
-  </swiper>
+        :lazy="true"
+        :pagination="pagination"
+        :navigation="true"
+        :modules="modules"
+        class="mySwiper w-full min-h-[200px]"
+    >
+      <swiper-slide v-for="image in images">
+        <img
+            :src="image.url"
+            :alt="image.alt"
+            loading="lazy"
+        />
+        <div
+            class="swiper-lazy-preloader swiper-lazy-preloader-white"
+        ></div>
+      </swiper-slide>
+    </swiper>
+  </div>
+
 </template>
 
 <script>
diff --git a/spa/src/views/Product.vue b/spa/src/views/Product.vue
index 9b47969..878bee9 100644
--- a/spa/src/views/Product.vue
+++ b/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();
diff --git a/spa/src/views/ProductsList.vue b/spa/src/views/ProductsList.vue
index 4acab76..dd91ac1 100644
--- a/spa/src/views/ProductsList.vue
+++ b/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>