need to fix vert long tablet overflow

Author: proger-coder

Routes/Item.js

@@ -1,3 +1,5 @@
+import Swiper from 'https://unpkg.com/swiper@7/swiper-bundle.esm.browser.min.js'
+
 export const Item = {
     props:[`items`,`cart`], //это переданный нам массив объектов items.
                      // Здесь к нему можно обращаться this.items
@@ -14,7 +16,6 @@ export const Item = {
                            :data="i" 
                            @click="dynamicBigImage(i)" 
                            class="item-images-smallImage">
-                      <div class="item-slide-indicator"></div>
                   </div>
 
               </div>                
@@ -25,9 +26,30 @@ export const Item = {
                    id="big-image" 
                    class="item-images-bigImage">
               </div>
-                   
+
+              <div class="item-mobile-swiper swiper" ref="carousel">
+                <!-- Additional required wrapper -->
+                <div class="swiper-wrapper">
+                  <!-- Slides -->
+                  <div v-for="(pic) in item?.media?.images" class="swiper-slide">
+                    <img :src="pic.image800pxUrl"
+                         alt="800">
+                  </div>
+
+                </div>
+                <!-- If we need pagination -->
+                <div class="swiper-pagination"></div>
+
+                <!-- If we need navigation buttons -->
+                <div class="swiper-button-prev"></div>
+                <div class="swiper-button-next"></div>
+
+                <!-- If we need scrollbar -->
+                <!-- <div class="swiper-scrollbar"></div>-->
+              </div>
 
             </div> 
+            
             <div class="item-infoAndOrder-box">
                 <h2 class="item-text-name">{{item?.name?.slice(8)}}</h2>
                 <p class="item-text-code">Код товара: {{item.id}}</p>
@@ -91,6 +113,18 @@ export const Item = {
     created(){
     },
     methods:{
+        init() {
+            const options = {
+                pagination: {
+                    el: '.swiper-pagination'
+                },
+                navigation: {
+                    nextEl: '.swiper-button-next',
+                    prevEl: '.swiper-button-prev'
+                }
+            }
+            const carousel = new Swiper(this.$refs.carousel, options)
+        },
             //выбираем карточку товара из массива, ищем через id в роуте-парамс
         selectItem(){
             let match = {}
@@ -134,8 +168,15 @@ export const Item = {
         }
     },
     mounted(){
+        this.$nextTick(() => { //что такое НекстТик ?
+            this.init()
+        });
         let preSelect= document.querySelector('select');
         if(preSelect){preSelect.selectedIndex = 1}
+
+        this.item.media.images.forEach(el => {
+            console.log(el.image800pxUrl)
+        })
     },
     computed:{
         //карточка товара - находим через функцию

styles.css

@@ -368,7 +368,7 @@ path.blue{
 .collections-section-vFor{
     display: flex;
     flex-direction: column;
-    margin: 10px 10px 10px  10px;
+    margin: 10px 10px 10px 10px;
 }
 
 /*================ ITEM ==============================*/
@@ -383,12 +383,13 @@ path.blue{
 
     .item-infoAndOrder-box{
         width: 40%;
-        padding:5px;
+        padding:10px;
     }
     .item-all-images-container{
         width: 60%;
     }
     .item-box-for-big-image{
+        display: flex;
         width: 80%;
     }
     .item-all-SmallImages-box{
@@ -397,9 +398,10 @@ path.blue{
             flex-direction: column;
             justify-content:center;
     }
-    .item-slide-indicator{
-        display:none;
+    .item-mobile-swiper{
+        display: none;
     }
+
 }
 /*для планш гориз*/
 @media screen and (min-width:768px) and (max-width: 1200px)  {
@@ -410,12 +412,13 @@ path.blue{
 
     .item-infoAndOrder-box{
         width: 40%;
-        padding:5px;
+        padding:10px;
     }
     .item-all-images-container{
         width: 60%;
     }
     .item-box-for-big-image{
+        display: flex;
         width: 80%;
     }
     .item-all-SmallImages-box{
@@ -424,9 +427,10 @@ path.blue{
             flex-direction: column;
             justify-content:center;
     }
-    .item-slide-indicator{
-        display:none;
+    .item-mobile-swiper{
+        display: none;
     }
+
 }
 
 /*для планш верт*/
@@ -437,8 +441,8 @@ path.blue{
     }
 
     .item-infoAndOrder-box{
-                width: 40%;
-        padding:5px;
+        width: 40%;
+        padding:10px;
     }
     .item-all-images-container{
         display: flex;
@@ -447,6 +451,7 @@ path.blue{
 
     }
     .item-box-for-big-image{
+        display: flex;
         width:100%
     }
 
@@ -457,26 +462,23 @@ path.blue{
         justify-content:center;
     }
 
-    .item-box-for-small-image{
-        /*aspect-ratio: 1/1;*/
-        /*width:260px;*/
+    .item-mobile-swiper{
+        display: none;
     }
 
-    .item-slide-indicator{
-        display:none;
-    }
 
 }
 
 /*длинный вариант - в столбик, но есть превьюшки*/
+/*---проработать длинное изображение - обрезается*/
 @media screen and (min-width:481px) and (max-width: 640px) {
     .item-whole-container{
         display:flex;
         flex-direction:column;
     }
     .item-infoAndOrder-box{
         width: 100%;
-        padding:5px;
+        padding:10px;
     }
     .item-all-images-container{
         display: flex;
@@ -485,6 +487,7 @@ path.blue{
 
     }
     .item-box-for-big-image{
+        display: flex;
         width:100%
     }
 
@@ -495,13 +498,8 @@ path.blue{
         justify-content:center;
     }
 
-    .item-box-for-small-image{
-        /*aspect-ratio: 1/1;*/
-        /*width:260px;*/
-    }
-
-    .item-slide-indicator{
-        display:none;
+    .item-mobile-swiper{
+        display: none;
     }
 
 }
@@ -513,42 +511,36 @@ path.blue{
         flex-direction:row;
     }
     .item-infoAndOrder-box{
-        padding:5px;
+        padding:10px;
     }
     .item-all-images-container{
         flex-direction: column-reverse;
+        width:100%;
     }
     .item-box-for-big-image{
-        width:100%;
+            display:none;
+        /*width:100%;*/
     }
     .item-all-SmallImages-box{
-        display: flex;
-        flex-direction: row;
-        justify-content: center;
+        display: none;
     }
     .item-images-smallImage{
         display:none;
     }
-    .item-slide-indicator{
-        width:15px;
-        height:15px;
-        border-radius:10px;
-        border:1px solid orangered;
-            background-color: grey;
-        /*не попробовать ли подобрать цвет под кругляшки из getMainColor(item)*/
-        margin:5px;
+    .item-mobile-swiper{
 
     }
+
 }
 
 
 .item-whole-container{
-    border: 2px solid darkolivegreen;
+    /*border: 2px solid darkolivegreen;*/
     flex-wrap:wrap;
 }
 
     .item-infoAndOrder-box{
-        border: 2px dotted violet;
+        /*border: 2px dotted violet;*/
     }
         .item-selectors-plus-buttons{
             display:flex;
@@ -580,47 +572,38 @@ path.blue{
     .item-all-images-container{
         font-size:0;
         display:flex;
-        /*flex-wrap:wrap;*/
-        border:2px dotted dodgerblue;
+        /*border:2px dotted dodgerblue;*/
     }
         .item-box-for-big-image{
-                /*width: 500px;*/
             overflow: hidden;
-            border: 2px solid red;
+            /*border: 2px solid red;*/
             aspect-ratio: 1/1;
-            display: flex;
             justify-content: center;
             align-items: center;
 
         }
             .item-images-bigImage{
-                border:2px solid darkgoldenrod;
+                /*border:2px solid darkgoldenrod;*/
                 max-width: 100%;
                 max-height: 100%;
                 height: auto;
             }
 
         .item-all-SmallImages-box{
             /*display: flex;в медиа*/
-            border:2px solid lime;
+            /*border:2px solid lime;*/
         }
 
             .item-box-for-small-image{
-                border: 2px solid purple;
+                /*border: 2px solid purple;*/
                 text-align: center;
                 margin:5px;
             }
                 .item-images-smallImage{
-                    border: 2px solid orangered;
+                    /*border: 2px solid orangered;*/
                     max-width:100%
                 }
 
-
-
-
-
-
-
 /*-----------подвал-----------------------------------*/
 footer{
     background-color: ghostwhite;
@@ -724,21 +707,6 @@ footer{
 }
 
 /*-----свайпер------------------------------*/
-/*html,*/
-/*body {*/
-/*    position: relative;*/
-/*    height: 100%;*/
-/*}*/
-
-/*body {*/
-/*    background: #eee;*/
-/*    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;*/
-/*    font-size: 14px;*/
-/*    color: #000;*/
-/*    margin: 0;*/
-/*    padding: 0;*/
-/*}*/
-
 .swiper {
     width: 100%;
     height: 100%;
@@ -767,7 +735,7 @@ footer{
 
 .swiper-slide img {
     display: block;
-            /*width: 100%;*/
+    width: 100%;
             /*height: 100%;*/
     object-fit: cover;
 }