heymlz/hossein-por-shop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add skeleton for swiper

Browse Source
This commit is contained in:
marzban-dev
2026-05-26 19:21:00 +03:30
parent ccf18fb768
commit f0b03e27b3
2 changed files with 53 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/global/product-detail/ProductsSlider.vue
+9 -5
View File
@@ -113,11 +113,15 @@ const onSwiper = (swiper: SwiperClass) => {
</Swiper> </Swiper>
</div> </div>
<template #fallback> <template #fallback>
<div class="w-full grid grid-cols-3 sm:grid-cols-4 gap-6"> <div class="w-full flex sm:grid justify-between sm:grid-cols-4 gap-6">
<div class="bg-neutral-100 !size-full !rounded-2xl !aspect-square" /> <div
<div class="bg-neutral-100 !size-full !rounded-2xl !aspect-square" /> class="bg-neutral-100 items-stretch w-25 sm:size-full rounded-e-2xl sm:rounded-2xl sm:aspect-square"
<div class="bg-neutral-100 !size-full !rounded-2xl !aspect-square" /> />
<div class="bg-neutral-100 !size-full !rounded-2xl !aspect-square" /> <div class="bg-neutral-100 size-full rounded-2xl aspect-square" />
<div
class="bg-neutral-100 items-stretch w-25 sm:size-full rounded-s-2xl sm:rounded-2xl sm:aspect-square"
/>
<div class="bg-neutral-100 size-full rounded-2xl aspect-square max-sm:hidden" />
</div> </div>
</template> </template>
</ClientOnly> </ClientOnly>
frontend/components/global/product-detail/Slider.vue
+9
View File
@@ -72,6 +72,7 @@ const changeSlide = (id: number) => {
</div> </div>
<div class="relative w-full"> <div class="relative w-full">
<ClientOnly>
<Swiper <Swiper
:slides-per-view="3" :slides-per-view="3"
:space-between="20" :space-between="20"
@@ -111,6 +112,14 @@ const changeSlide = (id: number) => {
</div> </div>
</SwiperSlide> </SwiperSlide>
</Swiper> </Swiper>
<template #fallback>
<div class="w-full grid grid-cols-3 gap-6">
<div class="bg-neutral-100 size-full rounded-2xl aspect-square" />
<div class="bg-neutral-100 size-full rounded-2xl aspect-square" />
<div class="bg-neutral-100 size-full rounded-2xl aspect-square" />
</div>
</template>
</ClientOnly>
<div <div
v-if="slides.length > 3" v-if="slides.length > 3"