From 38f6c759e78e9a4bb3f086db1bb2cbe353a10b2e Mon Sep 17 00:00:00 2001
From: marzban-dev <marzban.dev@gmail.com>
Date: Thu, 24 Apr 2025 14:41:35 +0330
Subject: [PATCH] Updated

---
 .../global/product-detail/Slider.vue          | 187 +++++++++---------
 1 file changed, 96 insertions(+), 91 deletions(-)

diff --git a/frontend/components/global/product-detail/Slider.vue b/frontend/components/global/product-detail/Slider.vue
index b033fa7..4613d11 100644
--- a/frontend/components/global/product-detail/Slider.vue
+++ b/frontend/components/global/product-detail/Slider.vue
@@ -45,106 +45,111 @@ const emptySlidesCount = computed(() => {
 const changeSlide = (id: number) => {
     emit("update:selectedSlide", id);
 };
-
 </script>
 
 <template>
-    <div class="flex flex-col relative gap-6">
-        <div
-            class="bg-white brightness-[97%] w-full relative aspect-square overflow-hidden rounded-[12px] md:rounded-200"
-        >
-            <Transition name="zoom" mode="out-in">
-                <NuxtImg
-                    :key="selectedSlideDetail.id"
-                    class="size-full absolute object-contain"
-                    :src="selectedSlideDetail.image"
-                    :alt="selectedSlideDetail.name"
-                />
-            </Transition>
-        </div>
-
-        <div class="relative w-full">
-            <Swiper
-                :slides-per-view="3"
-                :space-between="20"
-                @swiper="onSwiper"
-                class="w-full"
+    <div class="sticky top-10">
+        <div class="flex flex-col relative gap-6">
+            <div
+                class="bg-white brightness-[97%] w-full relative aspect-square overflow-hidden rounded-[12px] md:rounded-200"
             >
-                <SwiperSlide
-                    class="py-4"
-                    v-for="slide in slides"
-                    :key="slide.id"
+                <Transition
+                    name="zoom"
+                    mode="out-in"
                 >
-                    <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
+                        :key="selectedSlideDetail.id"
+                        class="size-full absolute object-contain"
+                        :src="selectedSlideDetail.image"
+                        :alt="selectedSlideDetail.name"
+                    />
+                </Transition>
+            </div>
+
+            <div class="relative w-full">
+                <Swiper
+                    :slides-per-view="3"
+                    :space-between="20"
+                    @swiper="onSwiper"
+                    class="w-full"
+                >
+                    <SwiperSlide
+                        class="py-4"
+                        v-for="slide in slides"
+                        :key="slide.id"
                     >
-                        <NuxtImg
-                            class="absolute object-cover size-full"
-                            :src="slide.image"
-                            :alt="String(slide.id)"
-                        />
-                    </div>
-                </SwiperSlide>
-                <SwiperSlide
-                    v-if="emptySlidesCount > 0"
-                    v-for="slide in emptySlidesCount"
-                    :key="slide"
-                    class="py-4"
+                        <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"
+                                :alt="String(slide.id)"
+                            />
+                        </div>
+                    </SwiperSlide>
+                    <SwiperSlide
+                        v-if="emptySlidesCount > 0"
+                        v-for="slide in emptySlidesCount"
+                        :key="slide"
+                        class="py-4"
+                    >
+                        <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>
+
+                <div
+                    v-if="slides.length > 3"
+                    @click="swiper_instance?.slidePrev()"
+                    class="absolute z-20 -right-4 shadow-lg cursor-pointer shadow-black/10 bottom-[50%] translate-y-1/2 bg-white rounded-full size-10 xs:size-11.5 flex justify-center items-center"
                 >
-                    <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>
+                    <Icon
+                        name="ci:arrow-right"
+                        class="**:stroke-black size-5 xs:size-6"
+                        :class="swiper_instance?.isBeginning ? '**:stroke-black/30' : ''"
+                    />
+                </div>
 
-            <div
-                v-if="slides.length > 3"
-                @click="swiper_instance?.slidePrev()"
-                class="absolute z-20 -right-4 shadow-lg cursor-pointer shadow-black/10 bottom-[50%] translate-y-1/2 bg-white rounded-full size-10 xs:size-11.5 flex justify-center items-center"
-            >
-                <Icon
-                    name="ci:arrow-right"
-                    class="**:stroke-black size-5 xs:size-6"
-                    :class="swiper_instance?.isBeginning ? '**:stroke-black/30' : ''"
-                />
-            </div>
-
-            <div
-                v-if="slides.length > 3"
-                @click="swiper_instance?.slideNext()"
-                class="absolute z-20 -left-4 shadow-lg cursor-pointer shadow-black/10 bottom-[50%] translate-y-1/2 bg-white rounded-full size-10 xs:size-11.5 flex justify-center items-center"
-            >
-                <Icon
-                    name="ci:arrow-left"
-                    class="**:stroke-black size-5 xs:size-6"
-                    :class="swiper_instance?.isEnd ? '**:stroke-black/30' : ''"
-                />
+                <div
+                    v-if="slides.length > 3"
+                    @click="swiper_instance?.slideNext()"
+                    class="absolute z-20 -left-4 shadow-lg cursor-pointer shadow-black/10 bottom-[50%] translate-y-1/2 bg-white rounded-full size-10 xs:size-11.5 flex justify-center items-center"
+                >
+                    <Icon
+                        name="ci:arrow-left"
+                        class="**:stroke-black size-5 xs:size-6"
+                        :class="swiper_instance?.isEnd ? '**:stroke-black/30' : ''"
+                    />
+                </div>
             </div>
+            <!--        <div class="grid grid-cols-3 gap-6">-->
+            <!--            <div-->
+            <!--                @click="changeSlide(slide.id)"-->
+            <!--                v-for="slide in slides"-->
+            <!--                :class="-->
+            <!--                    selectedSlide === slide.id-->
+            <!--                        ? '!ring-black'-->
+            <!--                        : 'ring-transparent'-->
+            <!--                "-->
+            <!--                class="active:scale-95 hover:ring-slate-200 transition-all cursor-pointer brightness-[97%] bg-white aspect-square ring-2 ring-offset-4 rounded-[12px] md:rounded-200 w-full overflow-hidden relative"-->
+            <!--                :key="slide.id"-->
+            <!--            >-->
+            <!--                <img-->
+            <!--                    class="absolute object-cover size-full"-->
+            <!--                    :src="slide.image"-->
+            <!--                    :alt="String(slide.id)"-->
+            <!--                />-->
+            <!--            </div>-->
+            <!--        </div>-->
         </div>
-        <!--        <div class="grid grid-cols-3 gap-6">-->
-        <!--            <div-->
-        <!--                @click="changeSlide(slide.id)"-->
-        <!--                v-for="slide in slides"-->
-        <!--                :class="-->
-        <!--                    selectedSlide === slide.id-->
-        <!--                        ? '!ring-black'-->
-        <!--                        : 'ring-transparent'-->
-        <!--                "-->
-        <!--                class="active:scale-95 hover:ring-slate-200 transition-all cursor-pointer brightness-[97%] bg-white aspect-square ring-2 ring-offset-4 rounded-[12px] md:rounded-200 w-full overflow-hidden relative"-->
-        <!--                :key="slide.id"-->
-        <!--            >-->
-        <!--                <img-->
-        <!--                    class="absolute object-cover size-full"-->
-        <!--                    :src="slide.image"-->
-        <!--                    :alt="String(slide.id)"-->
-        <!--                />-->
-        <!--            </div>-->
-        <!--        </div>-->
     </div>
 </template>