Merge pull request #136 from IBEC-BOX/fix/slider

fix variable undefined in slider when page reload
IBEC-BOX · Nov 7, 2024 · 8212811 · 8212811
2 parents 6b66934 + f8c880d
commit 8212811
Show file tree

Hide file tree

Showing 3 changed files with 126 additions and 7 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ibecsystems/nuxt3-ui-kit",
-  "version": "1.0.50",
+  "version": "1.0.51",
   "description": "Ibec Nuxt3 UI components",
   "repository": {
     "type": "git",

diff --git a/src/runtime/components/Pages/TestVuetify.vue b/src/runtime/components/Pages/TestVuetify.vue
@@ -42,10 +42,34 @@
     <NuxtPage class="bg-primary" />
     <section class="h-100 bg-primary">
       <v-container class="px-4">
-        <parts-files-erg
-          display-mode="select"
-          :content-select="Tabs"
-        />
+        <client-only>
+          <partsSlider
+            id="slider-about"
+            :slides="slides"
+            slider-allow-touch-move="false"
+            slider-speed="500"
+            :static-chips="{
+              text: 'about',
+              attrs: {
+                class: 'mt-12 mb-8 ml-9 ml-md-13',
+                color: 'white',
+                variant: 'outlined',
+                style: 'margin-top: 123px !important;'
+              }
+            }"
+            :slider-pagination="true"
+            :show-buttons="false"
+            slider-direction="vertical"
+            :slider-pagination-active-variant="'white'"
+            :height="'800px'"
+            :control-scroll="true"
+            :slider-background-image="'https://images.unsplash.com/photo-1562043236-559c3b65a6e2?auto=format&fit=crop&q=80&w=2940&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'"
+            :slider-background-image-zoom="true"
+            :slider-background-image-zoom-scale="1.5"
+            class="main__about__slider"
+          />
+
+        </client-only>
       </v-container>
     </section>
 
@@ -72,6 +96,101 @@
 </template>
 
 <script setup>
+const slides = [
+  {
+    id: 0,
+    title: 'Кредитная карта\n с целым годом без %',
+    subtitle: 'Подзаголовок маленький, в две строки',
+    titleAttrs: {
+      class: 'text-white w-75'
+    },
+    backgroundImg: 'https://images.unsplash.com/photo-1562043236-559c3b65a6e2?auto=format&fit=crop&q=80&w=2940&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    buttons: [
+      {
+        id: 0,
+        text: 'Large button',
+        attrs: {
+          size: 'large',
+          color: 'primary',
+          class: 'text-body-1'
+        }
+      }
+    ],
+    active: true
+  },
+
+  {
+    id: 1,
+    title: 'Страхование работников от несчастных случаев',
+    titleAttrs: {
+      class: 'text-h2 mb-0'
+    },
+    backgroundImg: 'https://images.unsplash.com/photo-1536257104079-aa99c6460a5a?auto=format&fit=crop&q=80&w=2940&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    buttons: [
+      {
+        id: 0,
+        text: 'Large button',
+        attrs: {
+          size: 'large',
+          color: 'primary',
+          class: 'text-body-1'
+        }
+      }
+    ],
+    active: true
+  },
+
+  {
+    id: 2,
+    title: 'Кредитная карта с целым годом без %',
+    subtitle: 'Подзаголовок маленький, в две строки',
+    backgroundImg: 'https://images.unsplash.com/photo-1516298773066-c48f8e9bd92b?auto=format&fit=crop&q=80&w=2940&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    active: false
+  },
+
+  {
+    id: 3,
+    title: 'Страхование работников от несчастных случаев',
+    titleAttrs: {
+      class: 'text-h2 mb-0'
+    },
+    backgroundImg: 'https://images.unsplash.com/photo-1536257104079-aa99c6460a5a?auto=format&fit=crop&q=80&w=2940&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    buttons: [
+      {
+        id: 0,
+        text: 'Large button',
+        attrs: {
+          size: 'large',
+          color: 'primary',
+          class: 'text-body-1'
+        }
+      }
+    ],
+    active: true
+  },
+
+  {
+    id: 4,
+    title: 'Кредитная карта\n с целым годом без %',
+    subtitle: 'Подзаголовок маленький, в две строки',
+    titleAttrs: {
+      class: 'text-white w-75'
+    },
+    backgroundImg: 'https://images.unsplash.com/photo-1562043236-559c3b65a6e2?auto=format&fit=crop&q=80&w=2940&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    buttons: [
+      {
+        id: 0,
+        text: 'Large button',
+        attrs: {
+          size: 'large',
+          color: 'primary',
+          class: 'text-body-1'
+        }
+      }
+    ],
+    active: true
+  },
+]
 
 const Tabs = [
   {

diff --git a/src/runtime/components/Parts/Slider.vue b/src/runtime/components/Parts/Slider.vue
@@ -443,13 +443,13 @@ const slideTo = (index) => {
 };
 
 const slidePrev = () => {
-  if (slider.value !== null) {
+  if (slider.value && slider.value.swiper) {
     slider.value.swiper.slidePrev(500);
   }
 };
 
 const slideNext = () => {
-  if (slider.value !== null) {
+  if (slider.value && slider.value.swiper) {
     slider.value.swiper.slideNext(500);
   }
 };