init

components/MainCarusel.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="variations" class="main-carousel">
-    <h2>Актуальные варианты</h2>
+    <h2>{{ title }}</h2>
 
     <Swiper
       :modules="[Navigation, Autoplay]"
@@ -16,16 +16,31 @@
         1280: { slidesPerView: 5 },
       }"
     >
-      <SwiperSlide v-for="item in previewItems" :key="item.id" class="main-carousel__variant">
-        <NuxtLink :to="`/post/${item.id}`">
-          <img :src="item.previewImage.src" :alt="item.shortTitle">
-          <div class="main-carousel__type text-sm ">
-            {{ $t(item.type) }}
-          </div>
-          <p class="text-sm">
-            {{ item.shortTitle }}
-          </p>
-        </NuxtLink>
+      <SwiperSlide
+        v-for="slide in mixedSlides"
+        :key="slide.id"
+        class="main-carousel__variant"
+      >
+        <template v-if="!slide.isText">
+          <NuxtLink :to="`/post/${slide.id}`">
+            <img :src="slide.previewImage.src" :alt="slide.shortTitle">
+            <div class="main-carousel__type text-sm">
+              {{ $t(slide.type) }}
+            </div>
+            <p class="text-sm">
+              {{ slide.shortTitle }}
+            </p>
+          </NuxtLink>
+        </template>
+
+        <template v-else>
+          <NuxtLink
+            href="#contacts"
+            class="main-carousel__text-slide"
+          >
+            {{ slide.text }}
+          </NuxtLink>
+        </template>
       </SwiperSlide>
     </Swiper>
   </div>
@@ -34,6 +49,7 @@
 <script setup lang="ts">
 import { Autoplay, Navigation } from 'swiper/modules'
 import { Swiper, SwiperSlide } from 'swiper/vue'
+import { computed } from 'vue'
 import 'swiper/css'
 import 'swiper/css/navigation'
 
@@ -46,7 +62,36 @@ interface PreviewItem {
   }
 }
 
-defineProps<{ previewItems: PreviewItem[] }>()
+const props = defineProps<{ title?: 'Актуальные варианты', previewItems: PreviewItem[] }>()
+
+const mixedSlides = computed(() => {
+  const result: Array<
+      PreviewItem | { isText: true, text: string }
+  > = []
+
+  props.previewItems.forEach((item, index) => {
+    result.push(item)
+
+    const count = index + 1
+
+    if (count % 6 === 0) {
+      result.push({
+        isText: true,
+        text: 'Хочешь больше вариантов?',
+      })
+      return
+    }
+
+    if (count % 3 === 0) {
+      result.push({
+        isText: true,
+        text: 'Не нашёл подходящий вариант?',
+      })
+    }
+  })
+
+  return result
+})
 </script>
 
 <style scoped lang="scss">
@@ -68,6 +113,19 @@ defineProps<{ previewItems: PreviewItem[] }>()
     }
   }
 
+  &__text-slide {
+    height: 300px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 12px;
+    background: #334155;
+    color: white;
+    padding: 16px;
+    text-align: center;
+    font-size: 18px;
+  }
+
   &__type {
     position: absolute;
     top: 4px;