создаю телегу товаров

components/ProductDescription.vue

@@ -95,6 +95,11 @@ function addToCartBtn() {
 .product-description {
   width: 100%;
   max-width: 335px;
+  padding-top: 30px;
+  padding-inline: 30px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
 
   @media (min-width: 768px) {
     position: sticky;
@@ -104,12 +109,6 @@ function addToCartBtn() {
     max-height: calc(100vh - 80px);
   }
 
-  padding-top: 30px;
-  padding-inline: 30px;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-
   &__sizes {
     display: grid;
     grid-template-columns: repeat(4, 1fr);

components/ProductImages.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="product-images">
+  <div v-if="!isMobile" class="product-images">
     <div
       v-for="image in currentVariantImages?.slice(0, 5)"
       :key="image?.id"
@@ -7,11 +7,33 @@
       <img width="100%" :src="image?.src" :alt="image?.src">
     </div>
   </div>
+
+  <Swiper
+    v-if="isMobile"
+    :pagination="true"
+    :loop="true"
+    :modules="modules"
+    class="mySwiper"
+  >
+    <SwiperSlide
+      v-for="image in currentVariantImages?.slice(0, 5)"
+      :key="image?.id"
+    >
+      <img width="100%" :src="image?.src" :alt="image?.src">
+    </SwiperSlide>
+  </Swiper>
 </template>
 
 <script setup lang="ts">
+import { useMediaQuery } from '@vueuse/core'
+import { Pagination } from 'swiper/modules'
+import { Swiper, SwiperSlide } from 'swiper/vue'
 import { useCurrentProduct } from '~/composables'
+import 'swiper/css'
+import 'swiper/css/pagination'
 
+const isMobile = useMediaQuery('(max-width: 1280px)')
+const modules = [Pagination]
 const { currentVariantImages } = useCurrentProduct()
 </script>
 
@@ -19,7 +41,7 @@ const { currentVariantImages } = useCurrentProduct()
 .product-images {
   position: relative;
   width: 100%;
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
 }
 </style>