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

Add animation to product slider

Browse Source
This commit is contained in:
marzban-dev
2025-01-30 01:09:48 +03:30
parent c1842b2de8
commit 9acc57cc86
1 changed files with 15 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/global/product-detail/Slider.vue
+15 -8
View File
@@ -37,21 +37,28 @@ const changeSlide = (id: number) => {
<template> <template>
<div class="flex flex-col relative gap-6"> <div class="flex flex-col relative gap-6">
<div class="bg-white brightness-[97%] w-full relative aspect-square overflow-hidden rounded-200"> <div class="bg-white brightness-[97%] w-full relative aspect-square overflow-hidden rounded-200">
<img <Transition name="zoom" mode="out-in">
class="size-full absolute object-contain" <img
:src="selectedSlideDetail.picture" :key="selectedSlideDetail"
:alt="String(selectedSlideDetail.id)" class="size-full absolute object-contain"
/> :src="selectedSlideDetail.picture"
:alt="String(selectedSlideDetail.id)"
/>
</Transition>
</div> </div>
<div class="flex items-center justify-between gap-6"> <div class="flex items-center justify-between gap-6">
<div <div
@click="changeSlide(slide.id)" @click="changeSlide(slide.id)"
v-for="slide in slides" v-for="slide in slides"
:class="selectedSlide === slide.id ? 'ring-black' : 'ring-transparent'" :class="selectedSlide === slide.id ? '!ring-black' : 'ring-transparent'"
class="cursor-pointer brightness-[97%] bg-white aspect-square ring-2 ring-offset-4 rounded-200 w-full overflow-hidden relative" class="active:scale-95 hover:ring-slate-200 transition-all cursor-pointer brightness-[97%] bg-white aspect-square ring-2 ring-offset-4 rounded-200 w-full overflow-hidden relative"
:key="slide.id" :key="slide.id"
> >
<img class="absolute object-cover size-full" :src="slide.picture" :alt="String(slide.id)" /> <img
class="absolute object-cover size-full"
:src="slide.picture"
:alt="String(slide.id)"
/>
</div> </div>
</div> </div>
</div> </div>