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
+44 -35
View File
@@ -72,45 +72,54 @@ const changeSlide = (id: number) => {
</div> </div>
<div class="relative w-full"> <div class="relative w-full">
<Swiper <ClientOnly>
:slides-per-view="3" <Swiper
:space-between="20" :slides-per-view="3"
@swiper="onSwiper" :space-between="20"
class="w-full" @swiper="onSwiper"
> class="w-full"
<SwiperSlide
v-for="slide in slides"
:key="slide.id"
> >
<div <SwiperSlide
@click="changeSlide(slide.id)" v-for="slide in slides"
:class="selectedSlide === slide.id ? '!border-black' : 'border-transparent'" :key="slide.id"
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 <div
class="absolute object-cover size-full" @click="changeSlide(slide.id)"
:src="slide.image" :class="selectedSlide === slide.id ? '!border-black' : 'border-transparent'"
loading="lazy" 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"
fetch-priority="low" >
:alt="String(slide.id)" <NuxtImg
/> class="absolute object-cover size-full"
</div> :src="slide.image"
</SwiperSlide> loading="lazy"
<SwiperSlide fetch-priority="low"
v-if="emptySlidesCount > 0" :alt="String(slide.id)"
v-for="slide in emptySlidesCount" />
:key="slide" </div>
> </SwiperSlide>
<div <SwiperSlide
class="brightness-[97%] flex-center bg-white aspect-square rounded-[12px] md:rounded-200 w-full" v-if="emptySlidesCount > 0"
v-for="slide in emptySlidesCount"
:key="slide"
> >
<Icon <div
name="ci:image-slash" class="brightness-[97%] flex-center bg-white aspect-square rounded-[12px] md:rounded-200 w-full"
class="size-[40px] sm:size-[60px] **:fill-black/20" >
/> <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> </div>
</SwiperSlide> </template>
</Swiper> </ClientOnly>
<div <div
v-if="slides.length > 3" v-if="slides.length > 3"