https://cosmetique.com.pk/assets/js/script.js

1// responsive navigation
2const menu = document.querySelector(".menu");
3const menuMain = menu.querySelector(".menu-main");
4const goBack = menu.querySelector(".go-back");
5const menuTrigger = document.querySelector(".mobile-menu-trigger");
6const closeMenu = menu.querySelector(".mobile-menu-close");
7let subMenu;
8menuMain.addEventListener("click", (e) => {
9    if (!menu.classList.contains("active")) {
10        return;
11    }
12    if (e.target.closest(".menu-item-has-children")) {
13        const hasChildren = e.target.closest(".menu-item-has-children");
14        showSubMenu(hasChildren);
15    }
16});
17
18
19goBack.addEventListener("click", () => {
20    hideSubMenu();
21})
22
23
24menuTrigger.addEventListener("click", () => {
25    toggleMenu();
26})
27
28
29closeMenu.addEventListener("click", () => {
30    toggleMenu();
31})
32
33
34document.querySelector(".menu-overlay").addEventListener("click", () => {
35    toggleMenu();
36})
37
38
39function toggleMenu() {
40    menu.classList.toggle("active");
41    document.querySelector(".menu-overlay").classList.toggle("active");
42}
43function showSubMenu(hasChildren) {
44    subMenu = hasChildren.querySelector(".sub-menu");
45    subMenu.classList.add("active");
46    subMenu.style.animation = "slideLeft 0.5s ease forwards";
47    const menuTitle = hasChildren.querySelector("i").parentNode.childNodes[0].textContent;
48    menu.querySelector(".current-menu-title").innerHTML = menuTitle;
49    menu.querySelector(".mobile-menu-head").classList.add("active");
50}
51
52
53function hideSubMenu() {
54    subMenu.style.animation = "slideRight 0.5s ease forwards";
55    setTimeout(() => {
56        subMenu.classList.remove("active");
57    }, 300);
58    menu.querySelector(".current-menu-title").innerHTML = "";
59    menu.querySelector(".mobile-menu-head").classList.remove("active");
60}
61
62
63window.onresize = function () {
64    if (this.innerWidth > 991) {
65        if (menu.classList.contains("active")) {
66            toggleMenu();
67        }
68
69
70    }
71}
72
73
74// sticky navbar
75window.onscroll = function () { makeNavbarSticky() };
76
77
78var navbar = document.getElementById("navbar");
79var sticky = navbar.offsetTop;
80
81
82function makeNavbarSticky() {
83    if (window.pageYOffset >= sticky) {
84        navbar.classList.add("sticky-nav");
85    } else {
86        navbar.classList.remove("sticky-nav");
87    }
88}
89
90
91
92
93// swiper slider implementation
94const swiper1 = new Swiper('.swiper-banner', {
95    // Optional parameters
96    loop: true,
97    autoplay: {
98        delay: 2500,
99        disableOnInteraction: false
100    },
101});
102
103
104const swiper2 = new Swiper('.our-specialist-slider', {
105    // Optional parameters
106    loop: true,
107    effect: "fade",
108
109
110    autoplay: {
111        delay: 3000,
112        disableOnInteraction: true
113    },
114});
115
116
117const swiper3 = new Swiper('.find-top-slider', {
118    // Optional parameters
119    loop: true,
120    navigation: {
121        prevEl: ".swiper-button-prev",
122        nextEl: ".swiper-button-next",
123    },
124    autoplay: {
125        delay: 3000,
126        disableOnInteraction: true
127    },
128});
129
130
131var swiper4 = new Swiper(".our-doctor-slider", {
132    spaceBetween: 20,
133    loop: true,
134    freeMode: true,
135    pagination: {
136        el: ".swiper-pagination",
137        clickable: true,
138    },
139    navigation: {
140        prevEl: ".swiper-button-prev",
141        nextEl: ".swiper-button-next",
142    },
143    autoplay: {
144        delay: 3000,
145        disableOnInteraction: true
146    },
147    breakpoints: {
148        640: {
149            slidesPerView: 2,
150            spaceBetween: 10,
151        },
152        768: {
153            slidesPerView: 3,
154            spaceBetween: 20,
155        },
156        1024: {
157            slidesPerView: 3,
158            spaceBetween: 20,
159        },
160    },
161});
162
163
164var swiper5 = new Swiper(".before-after-slider", {
165    spaceBetween: 20,
166    loop: true,
167    freeMode: true,
168    pagination: {
169        el: ".swiper-pagination",
170        clickable: true,
171    },
172    navigation: {
173        prevEl: ".swiper-button-prev",
174        nextEl: ".swiper-button-next",
175    },
176    autoplay: {
177        delay: 3000,
178        disableOnInteraction: false
179    },
180    breakpoints: {
181        640: {
182            slidesPerView: 2,
183            spaceBetween: 10,
184        },
185        768: {
186            slidesPerView: 3,
187            spaceBetween: 20,
188        },
189        1024: {
190            slidesPerView: 3,
191            spaceBetween: 20,
192        },
193    },
194
195
196});
197
198
199const swiper6 = new Swiper('.most-popular-cosmetic-slider', {
200    // Optional parameters
201    loop: true,
202    effect: "fade",
203    autoplay: {
204        delay: 3000,
205        disableOnInteraction: true
206    },
207});
208
209
210var swiper7 = new Swiper(".top-dermatologists-slider", { 
211    spaceBetween: 10, 
212    loop: true, 
213    freeMode: true, 
214    pagination: { 
215    el: ".swiper-pagination", 
216    clickable: true, 
217        
218    }, 
219    navigation: { 
220    prevEl: ".swiper-button-prev", 
221    nextEl: ".swiper-button-next", 
222        
223    }, 
224    autoplay: { 
225    delay: 3000, 
226    disableOnInteraction: true 
227        
228    }, 
229    breakpoints: {
230    640: { 
231    slidesPerView: 2, 
232    spaceBetween: 10,
233    }, 
234    
235    768: { 
236    slidesPerView: 3, 
237    spaceBetween: 20, 
238        
239    }, 
240    1024: { 
241    slidesPerView: 3, 
242    spaceBetween: 20, 
243        
244    }, 
245    1440: { 
246    slidesPerView: 3, 
247    spaceBetween: 20, 
248        
249    }, 
250        
251    }, 
252    
253});