Add swiper to pages

packages/client/src/pages/pages.vue

@@ -2,40 +2,57 @@
 <MkStickyContainer>
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :content-max="700">
-		<div v-if="tab === 'featured'" class="rknalgpo">
+		<swiper
+			:modules="[Virtual]"
+			:space-between="20"
+			:virtual="true"
+			@swiper="setSwiperRef"
+			@slide-change="onSlideChange"
+		>
+			<swiper-slide>
+				<div class="rknalgpo">
 					<MkPagination v-slot="{items}" :pagination="featuredPagesPagination">
 						<MkPagePreview v-for="page in items" :key="page.id" class="ckltabjg" :page="page"/>
 					</MkPagination>
 				</div>
-
-		<div v-else-if="tab === 'my'" class="rknalgpo my">
+			</swiper-slide>
+			<swiper-slide>
+				<div class="rknalgpo my">
 					<MkButton class="new" @click="create()"><i class="fas fa-plus"></i></MkButton>
 					<MkPagination v-slot="{items}" :pagination="myPagesPagination">
 						<MkPagePreview v-for="page in items" :key="page.id" class="ckltabjg" :page="page"/>
 					</MkPagination>
 				</div>
-
-		<div v-else-if="tab === 'liked'" class="rknalgpo">
+			</swiper-slide>
+			<swiper-slide>
+				<div class="rknalgpo">
 					<MkPagination v-slot="{items}" :pagination="likedPagesPagination">
 						<MkPagePreview v-for="like in items" :key="like.page.id" class="ckltabjg" :page="like.page"/>
 					</MkPagination>
 				</div>
+			</swiper-slide>
+		</swiper>
 	</MkSpacer>
 </MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
 import { computed, inject } from 'vue';
+import Virtual from 'swiper';
+import { Swiper, SwiperSlide } from 'swiper/vue';
 import MkPagePreview from '@/components/MkPagePreview.vue';
 import MkPagination from '@/components/MkPagination.vue';
 import MkButton from '@/components/MkButton.vue';
 import { useRouter } from '@/router';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
+import 'swiper/scss';
+import 'swiper/scss/virtual';
 
 const router = useRouter();
 
 let tab = $ref('featured');
+const tabs = ['featured', 'my', 'liked'];
 
 const featuredPagesPagination = {
 	endpoint: 'pages/featured' as const,