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>
</div>
<template #fallback>
<div class="w-full grid grid-cols-3 sm:grid-cols-4 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 class="bg-neutral-100 !size-full !rounded-2xl !aspect-square" />
<div class="w-full flex sm:grid justify-between sm:grid-cols-4 gap-6">
<div
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 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>
</template>
</ClientOnly>
frontend/components/global/product-detail/Slider.vue
+44 -35
View File
@@ -72,45 +72,54 @@ const changeSlide = (id: number) => {
</div>
<div class="relative w-full">
<Swiper
:slides-per-view="3"
:space-between="20"
@swiper="onSwiper"
class="w-full"
>
<SwiperSlide
v-for="slide in slides"
:key="slide.id"
<ClientOnly>
<Swiper
:slides-per-view="3"
:space-between="20"
@swiper="onSwiper"
class="w-full"
>
<div
@click="changeSlide(slide.id)"
:class="selectedSlide === slide.id ? '!border-black' : 'border-transparent'"
class="active:scale-95 hover:border-slate-200 transition-all cursor-pointer brightness-[97%] bg-white aspect-square border-2 rounded-[12px] md:rounded-200 w-full overflow-hidden relative"
<SwiperSlide
v-for="slide in slides"
:key="slide.id"
>
<NuxtImg
class="absolute object-cover size-full"
:src="slide.image"
loading="lazy"
fetch-priority="low"
:alt="String(slide.id)"
/>
</div>
</SwiperSlide>
<SwiperSlide
v-if="emptySlidesCount > 0"
v-for="slide in emptySlidesCount"
:key="slide"
>
<div
class="brightness-[97%] flex-center bg-white aspect-square rounded-[12px] md:rounded-200 w-full"
<div
@click="changeSlide(slide.id)"
:class="selectedSlide === slide.id ? '!border-black' : 'border-transparent'"
class="active:scale-95 hover:border-slate-200 transition-all cursor-pointer brightness-[97%] bg-white aspect-square border-2 rounded-[12px] md:rounded-200 w-full overflow-hidden relative"
>
<NuxtImg
class="absolute object-cover size-full"
:src="slide.image"
loading="lazy"
fetch-priority="low"
:alt="String(slide.id)"
/>
</div>
</SwiperSlide>
<SwiperSlide
v-if="emptySlidesCount > 0"
v-for="slide in emptySlidesCount"
:key="slide"
>
<Icon
name="ci:image-slash"
class="size-[40px] sm:size-[60px] **:fill-black/20"
/>
<div
class="brightness-[97%] flex-center bg-white aspect-square rounded-[12px] md:rounded-200 w-full"
>
<Icon
name="ci:image-slash"
class="size-[40px] sm:size-[60px] **:fill-black/20"
/>
</div>
</SwiperSlide>
</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>
</SwiperSlide>
</Swiper>
</template>
</ClientOnly>
<div
v-if="slides.length > 3"