From 24715c865229db0e169ec93be0d7d6f338cc5984 Mon Sep 17 00:00:00 2001
From: ninedev <master-vva@narod.ru>
Date: Thu, 30 Jan 2025 12:32:54 +0300
Subject: [PATCH] fix number of carousel items

---
 src/howitwas.vue | 26 ++++++++++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/howitwas.vue b/src/howitwas.vue
index 2d55f3d..b364315 100644
--- a/src/howitwas.vue
+++ b/src/howitwas.vue
@@ -3,18 +3,40 @@
 import { Carousel, Slide, Navigation } from 'vue3-carousel';
 import 'vue3-carousel/carousel.css'
 
-
 const images = Array.from({ length: 9 }, (_, index) => ({
   id: index + 1,
   url: `/photo/${index + 1}.jpg`,
 }));
+const itemsToShow = ref<number | 'auto'>('auto');
+
+onMounted(() => {
+  const resizeObserver = new ResizeObserver((entries) => {
+    entries.forEach((entry) => {
+      if (entry.contentBoxSize && entry.contentBoxSize.length) {
+        if (entry.contentBoxSize[0].inlineSize <=665) {
+          itemsToShow.value = 1;
+        } else {
+          itemsToShow.value = 'auto';
+        }
+      }
+    });
+  });
+
+  resizeObserver.observe(document.body);
+});
 </script>
 
 <template>
   <article id="howitwas">
     <h2>Как это было в 2024</h2>
 
-    <Carousel class="howitwas-carousel" :transition="800" :gap="24" itemsToShow="auto" wrapAround>
+    <Carousel
+      class="howitwas-carousel"
+      :transition="800"
+      :gap="24"
+      :itemsToShow="itemsToShow"
+      wrapAround
+    >
       <Slide v-for="slide in images" :key="slide">
         <img :src="slide.url" alt="" class="howitwas-carouselSlide" />
       </Slide>