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

Updated

Browse Source
This commit is contained in:
marzban-dev
2025-06-01 22:15:41 +03:30
parent 8a40c619ae
commit c588248fd7
1 changed files with 44 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/home/ProductsShowcase.vue
+40 -36
View File
@@ -3,13 +3,16 @@
import useHomeData from "~/composables/api/home/useHomeData";
import { motion } from "motion-v";
import useSlider from "~/composables/global/useSlider";
// state
const { data: homeData } = useHomeData();
const sliderTimer = ref<NodeJS.Timeout | null>(null);
const activeSlide = ref(0);
const { nextSlide, prevSlide, slideTo, activeSlide, progress } = useSlider({
duration: 10_000,
count: homeData.value!.show_case_slider.length,
});
const variants = {
hide: { opacity: 0, y: -200 },
@@ -83,36 +86,6 @@ const childImageVariants = {
},
},
};
const slideTo = (index: number) => {
activeSlide.value = index;
restartSliderTimer();
};
const nextSlide = () => {
const slidesCount = homeData.value!.show_case_slider.length;
if (activeSlide.value > slidesCount - 2) {
activeSlide.value = 0;
} else {
activeSlide.value = activeSlide.value + 1;
}
};
const restartSliderTimer = () => {
if (sliderTimer.value) clearInterval(sliderTimer.value);
sliderTimer.value = setInterval(() => {
nextSlide();
}, 5000);
};
onMounted(() => {
nextSlide();
restartSliderTimer();
});
onUnmounted(() => {
restartSliderTimer();
});
</script>
<template>
@@ -191,16 +164,47 @@ onUnmounted(() => {
:variants="childContentVariants"
class="flex flex-col items-center justify-center gap-6 text-center"
>
<div class="flex items-center flex-row-reverse gap-4 mb-4">
<div class="flex items-center justify-center gap-4 sm:gap-6">
<button
@click="nextSlide"
class="relative"
>
<div class="size-8 blur-xl bg-white absolute ping-animation max-sm:hidden"></div>
<Icon
class="**:stroke-white cursor-pointer size-6 md:size-8"
name="ci:arrow-right"
/>
</button>
<div class="flex items-center flex-row-reverse gap-3 xs:gap-4">
<button
v-for="(_slide, index) in homeData!.show_case_slider"
@click="slideTo(index)"
class="py-4 cursor-pointer active:scale-90 transition-transform"
class="h-12 flex-center cursor-pointer active:scale-90 transition-transform"
>
<div
class="h-1 w-12 sm:w-18 lg:w-24 rounded-full"
:class="activeSlide === index ? 'bg-blue-500' : 'bg-white/15'"
dir="ltr"
:class="activeSlide === index ? 'bg-blue-500/50' : 'bg-white/15'"
class="h-1 w-8 xs:w-12 md:w-16 rounded-full"
>
<div
:class="activeSlide === index ? 'bg-blue-500' : 'bg-transparent w-full'"
class="h-full transition-all"
:style="{ width: `${progress}%` }"
></div>
</div>
</button>
</div>
<button
@click="prevSlide"
class="relative"
>
<div class="size-8 blur-xl bg-white absolute ping-animation max-sm:hidden"></div>
<Icon
class="**:stroke-white cursor-pointer size-6 md:size-8"
name="ci:arrow-left"
/>
</button>
</div>