Updated
This commit is contained in:
marzban-dev
@@ -5,17 +5,13 @@
|
||||
import { Swiper, SwiperSlide } from "swiper/vue";
|
||||
import type { SwiperClass } from "swiper/react";
|
||||
import useHomeData from "~/composables/api/home/useHomeData";
|
||||
import type { LoadingOverlayProvideType } from "~/pages/index.vue";
|
||||
|
||||
// provide / inject
|
||||
|
||||
const { changeLoadingOverlay } = inject("loadingOverlay") as LoadingOverlayProvideType;
|
||||
|
||||
// state
|
||||
|
||||
const { data: homeData } = useHomeData();
|
||||
const { $gsap: gsap, $ScrollTrigger: ScrollTrigger } = useNuxtApp();
|
||||
const swiper_instance = ref<SwiperClass | null>(null);
|
||||
const showLoadingOverlay = useState('showLoadingOverlay');
|
||||
|
||||
const observerTarget = ref(null);
|
||||
const shouldPauseVideos = ref(false);
|
||||
@@ -23,7 +19,6 @@ const shouldPauseVideos = ref(false);
|
||||
useIntersectionObserver(
|
||||
observerTarget,
|
||||
([entry], observerElement) => {
|
||||
console.log(entry.rootBounds ? !entry.isIntersecting : false, "asdad");
|
||||
shouldPauseVideos.value = entry.rootBounds ? !entry.isIntersecting : false;
|
||||
}
|
||||
);
|
||||
@@ -36,7 +31,7 @@ let gsapTimeline: gsap.core.Timeline;
|
||||
// methods
|
||||
|
||||
const onSwiper = (swiper: SwiperClass) => {
|
||||
changeLoadingOverlay(false);
|
||||
showLoadingOverlay.value = false;
|
||||
swiper_instance.value = swiper;
|
||||
};
|
||||
|
||||
@@ -99,18 +94,11 @@ onMounted(() => {
|
||||
marginTop: "0px",
|
||||
scale: 1.025
|
||||
}, {
|
||||
marginTop: "96px",
|
||||
marginTop: () => {
|
||||
const navbarEl = document.querySelector("#header-navbar") as HTMLDivElement;
|
||||
return `${navbarEl.clientHeight}px`;
|
||||
},
|
||||
scale: 1
|
||||
}, "=")
|
||||
.fromTo("#header-slider-pagination-child", {
|
||||
padding: "0px 0px"
|
||||
}, {
|
||||
padding: "0px 80px"
|
||||
}, "=")
|
||||
.fromTo(".header-slider-item-child", {
|
||||
padding: "0px 80px"
|
||||
}, {
|
||||
padding: "0px 40px"
|
||||
}, "=");
|
||||
|
||||
ScrollTrigger.create({
|
||||
@@ -122,7 +110,6 @@ onMounted(() => {
|
||||
// markers: true,
|
||||
end: "bottom top"
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
@@ -133,15 +120,23 @@ onUnmounted(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div id="header-slider-container" class="w-full mb-20 z-50">
|
||||
<div
|
||||
id="header-slider-container"
|
||||
class="w-full mb-20 z-50"
|
||||
>
|
||||
|
||||
<div id="header-slider-wrapper" class="relative">
|
||||
<Swiper
|
||||
ref="observerTarget"
|
||||
:slides-per-view="slidesPerView"
|
||||
:loop="true"
|
||||
:space-between="40"
|
||||
:space-between="20"
|
||||
:centered-slides="true"
|
||||
:breakpoints="{
|
||||
1024 : {
|
||||
spaceBetween : 40
|
||||
}
|
||||
}"
|
||||
@swiper="onSwiper"
|
||||
>
|
||||
<SwiperSlide
|
||||
@@ -160,19 +155,26 @@ onUnmounted(() => {
|
||||
: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="header-slider-item-child absolute z-10 w-full bottom-36">
|
||||
<div class="w-full container">
|
||||
<div class="border-b border-white/10 pb-6 flex flex-col gap-4">
|
||||
<div class="flex items-center gap-8">
|
||||
|
||||
<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-[50px] relative flex items-center justify-center">
|
||||
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
|
||||
@@ -181,63 +183,59 @@ onUnmounted(() => {
|
||||
>
|
||||
<Icon
|
||||
:name="isMuted ? 'bi:volume-mute-fill' : 'bi:volume-up-fill'"
|
||||
class="text-black"
|
||||
size="24px"
|
||||
class="text-black size-4 md:size-[18px] lg:size-[24px]"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<h3 class="typo-h-1 tracking-[-2px] text-white">
|
||||
<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-end">
|
||||
<span class="typo-p-lg text-white">
|
||||
{{ slide.description }}
|
||||
</span>
|
||||
<Button class="invert rounded-full hover:bg-transparent">
|
||||
<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>
|
||||
</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"
|
||||
@click="swiper_instance?.slideTo(index)"
|
||||
>
|
||||
</div>
|
||||
</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>
|
||||
<div
|
||||
id="header-slider-pagination"
|
||||
class="absolute w-full left-1/2 -translate-x-1/2 z-100"
|
||||
:style="{ bottom : '80px' }"
|
||||
>
|
||||
<div class="container h-full">
|
||||
<div id="header-slider-pagination-child" class="h-full flex items-center justify-between">
|
||||
<button @click="swiper_instance?.slidePrev()">
|
||||
<Icon
|
||||
class="**:stroke-white cursor-pointer"
|
||||
name="ci:arrow-right"
|
||||
size="24"
|
||||
/>
|
||||
</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-3 rounded-full transition-all duration-200"
|
||||
@click="swiper_instance?.slideTo(index)"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<button>
|
||||
<Icon
|
||||
@click="swiper_instance?.slideNext()"
|
||||
class="**:stroke-white cursor-pointer"
|
||||
name="ci:arrow-left"
|
||||
size="24"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user