Fix hero slider bugs
This commit is contained in:
marzban-dev
@@ -122,7 +122,7 @@ onMounted(() => {
|
||||
end: "bottom top"
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
const calculateOnResize = () => {
|
||||
if (window.innerWidth > 768) {
|
||||
gsap.to("#header-navbar", {
|
||||
background: "transparent",
|
||||
@@ -133,19 +133,18 @@ onMounted(() => {
|
||||
resetTimelineForMobile();
|
||||
scrollTrigger.disable();
|
||||
}
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
calculateOnResize()
|
||||
}, 100);
|
||||
|
||||
setTimeout(() => {
|
||||
calculateOnResize()
|
||||
}, 200);
|
||||
|
||||
window.addEventListener("resize", () => {
|
||||
if (window.innerWidth > 768) {
|
||||
gsap.to("#header-navbar", {
|
||||
background: "transparent",
|
||||
filter: "invert(100%)"
|
||||
});
|
||||
scrollTrigger.enable();
|
||||
} else {
|
||||
resetTimelineForMobile();
|
||||
scrollTrigger.disable();
|
||||
}
|
||||
calculateOnResize()
|
||||
});
|
||||
|
||||
});
|
||||
@@ -170,7 +169,7 @@ onUnmounted(() => {
|
||||
:centered-slides="true"
|
||||
:breakpoints="{
|
||||
768: {
|
||||
spaceBetween : 40
|
||||
spaceBetween : 40,
|
||||
}
|
||||
}"
|
||||
@swiper="onSwiper"
|
||||
@@ -178,96 +177,97 @@ onUnmounted(() => {
|
||||
<SwiperSlide
|
||||
v-for="(slide, index) in homeData!.sliders"
|
||||
:key="slide.id"
|
||||
class="max-md:container"
|
||||
>
|
||||
<div
|
||||
class="header-slider-item relative w-full overflow-hidden max-md:rounded-[20px]"
|
||||
>
|
||||
<template v-if="!!slide.video">
|
||||
<video
|
||||
:id="`slide-video-${index}`"
|
||||
:muted="swiper_instance?.realIndex !== index ? true : isMuted"
|
||||
loop
|
||||
class="slide-video absolute inset-0 size-full object-cover brightness-90"
|
||||
:src="slide.video"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<img
|
||||
v-else
|
||||
class="absolute inset-0 size-full object-cover"
|
||||
:src="slide.image!"
|
||||
:alt="slide.title"
|
||||
/>
|
||||
|
||||
<div class="size-full absolute z-10 bg-linear-to-t from-black/50 to-transparent" />
|
||||
|
||||
<div class="max-md:container">
|
||||
<div
|
||||
:class="swiper_instance?.realIndex !== index ? 'opacity-0' : ''"
|
||||
class="w-full transition-opacity pb-6 xs:pb-10 lg:pb-16 px-6 xs:px-10 lg:px-16 gap-6 xs:gap-10 lg:gap-12 container flex flex-col h-full justify-end relative z-10"
|
||||
class="header-slider-item relative w-full overflow-hidden max-md:rounded-[20px]"
|
||||
>
|
||||
<template v-if="!!slide.video">
|
||||
<video
|
||||
:id="`slide-video-${index}`"
|
||||
:muted="swiper_instance?.realIndex !== index ? true : isMuted"
|
||||
loop
|
||||
class="slide-video absolute inset-0 size-full object-cover brightness-90"
|
||||
:src="slide.video"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<div class="header-slider-item-child w-full">
|
||||
<div class="border-b border-white/10 pb-6 flex flex-col gap-2 md:gap-4">
|
||||
<div class="flex items-center gap-4 lg:gap-8">
|
||||
<div
|
||||
class="hover:scale-110 size-[36px] md:size-[42px] lg:size-[50px] relative flex items-center justify-center">
|
||||
<div class="size-full scale-75 bg-white absolute rounded-full animate-ping" />
|
||||
<button
|
||||
@click="isMuted = !isMuted"
|
||||
class="transition-all cursor-pointer flex-center bg-white z-10 size-full rounded-full"
|
||||
>
|
||||
<Icon
|
||||
:name="isMuted ? 'bi:volume-mute-fill' : 'bi:volume-up-fill'"
|
||||
class="text-black size-4 md:size-[18px] lg:size-[24px]"
|
||||
/>
|
||||
</button>
|
||||
<img
|
||||
v-else
|
||||
class="absolute inset-0 size-full object-cover"
|
||||
:src="slide.image!"
|
||||
:alt="slide.title"
|
||||
/>
|
||||
|
||||
<div class="size-full absolute z-10 bg-linear-to-t from-black/50 to-transparent" />
|
||||
|
||||
<div
|
||||
:class="swiper_instance?.realIndex !== index ? 'opacity-0' : ''"
|
||||
class="w-full transition-opacity pb-6 xs:pb-10 lg:pb-16 px-6 xs:px-10 lg:px-16 gap-6 xs:gap-10 lg:gap-12 container flex flex-col h-full justify-end relative z-10"
|
||||
>
|
||||
|
||||
<div class="header-slider-item-child w-full">
|
||||
<div class="border-b border-white/10 pb-6 flex flex-col gap-2 md:gap-4">
|
||||
<div class="flex items-center gap-4 lg:gap-8">
|
||||
<div
|
||||
class="hover:scale-110 size-[36px] md:size-[42px] lg:size-[50px] relative flex items-center justify-center">
|
||||
<div class="size-full scale-75 bg-white absolute rounded-full animate-ping" />
|
||||
<button
|
||||
@click="isMuted = !isMuted"
|
||||
class="transition-all cursor-pointer flex-center bg-white z-10 size-full rounded-full"
|
||||
>
|
||||
<Icon
|
||||
:name="isMuted ? 'bi:volume-mute-fill' : 'bi:volume-up-fill'"
|
||||
class="text-black size-4 md:size-[18px] lg:size-[24px]"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<h3 class="typo-h-6 md:typo-h-4 lg:typo-h-1 tracking-[-2px] text-white">
|
||||
{{ slide.title }}
|
||||
</h3>
|
||||
</div>
|
||||
<h3 class="typo-h-6 md:typo-h-4 lg:typo-h-1 tracking-[-2px] text-white">
|
||||
{{ slide.title }}
|
||||
</h3>
|
||||
</div>
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="truncate typo-p-xs md:typo-p-sm lg:typo-p-lg text-white">
|
||||
{{ slide.description }}
|
||||
</span>
|
||||
<Button
|
||||
class="max-sm:hidden max-lg:typo-label-xs invert rounded-full hover:bg-transparent">
|
||||
مشاهده
|
||||
</Button>
|
||||
<Button
|
||||
class="max-sm:hidden max-lg:typo-label-xs invert rounded-full hover:bg-transparent">
|
||||
مشاهده
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="header-slider-pagination-child"
|
||||
class="flex items-center justify-between"
|
||||
>
|
||||
<button @click="swiper_instance?.slidePrev()">
|
||||
<Icon
|
||||
class="**:stroke-white cursor-pointer size-5 md:size-6"
|
||||
name="ci:arrow-right"
|
||||
/>
|
||||
</button>
|
||||
<div class="flex items-center justify-center gap-3 text-white">
|
||||
<div
|
||||
v-for="(_slide, index) in homeData!.sliders"
|
||||
:class="swiper_instance?.realIndex === index ? 'bg-white' : 'bg-transparent'"
|
||||
class="border border-white size-2 md:size-3 rounded-full transition-all duration-200"
|
||||
>
|
||||
<div
|
||||
id="header-slider-pagination-child"
|
||||
class="flex items-center justify-between"
|
||||
>
|
||||
<button @click="swiper_instance?.slidePrev()">
|
||||
<Icon
|
||||
class="**:stroke-white cursor-pointer size-5 md:size-6"
|
||||
name="ci:arrow-right"
|
||||
/>
|
||||
</button>
|
||||
<div class="flex items-center justify-center gap-3 text-white">
|
||||
<div
|
||||
v-for="(_slide, index) in homeData!.sliders"
|
||||
:class="swiper_instance?.realIndex === index ? 'bg-white' : 'bg-transparent'"
|
||||
class="border border-white size-2 md:size-3 rounded-full transition-all duration-200"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<button>
|
||||
<Icon
|
||||
@click="swiper_instance?.slideNext()"
|
||||
class="**:stroke-white cursor-pointer size-5 md:size-6"
|
||||
name="ci:arrow-left"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<button>
|
||||
<Icon
|
||||
@click="swiper_instance?.slideNext()"
|
||||
class="**:stroke-white cursor-pointer size-5 md:size-6"
|
||||
name="ci:arrow-left"
|
||||
/>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
</Swiper>
|
||||
|
||||
Reference in New Issue
Block a user