сделал адаптивность для projects

2024-12-19 01:03:13 +03:00
parent 6bc4c7213c
commit b155852f9c
4 changed files with 279 additions and 155 deletions
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -42,65 +42,99 @@ const reviewsSwiper = new Swiper('.reviews-swiper', {
    }
 })

-// gymSwiper.destroy();
+
+const projectsSwiper = new Swiper('.projects-swiper', {
+    direction: 'horizontal',
+    breakpoints: {
+        320:{
+            slidesPerView: 1,
+            spaceBetween: 24,
+        },
+        996: {
+            slidesPerView: 1
+        },
+    },
+    // Navigation arrows
+    navigation: {
+        nextEl: '.swiper-button-next',
+        prevEl: '.swiper-button-prev',
+    },    
+    runCallbacksOnInit: true,
+    // === new change
+    on: {
+        slideChange: function(){
+            let offer = document.querySelector('#numberProjects');
+            offer.innerHTML = (this.activeIndex +  1);
+        }
+    }
+});
+
+
+

 // how
+let itemButtons = document.querySelectorAll('.how-control__item');
+itemButtons.forEach((button) => {
+    let num = button.dataset.num;

+    button.onclick = function name(params, index) {
+
+        let activeContent = document.querySelector('.how__content').querySelector('.active'),
+            activeButton = document.querySelector('.how__control').querySelector('.active');
+
+        if (activeContent.dataset.num == button.dataset.num) return;
+        
+        activeContent.style.height = '0px';
+        activeContent.classList.remove('active');
+        activeButton.classList.remove('active');
+
+        let newActive = document.querySelector(`.how-content__item-block[data-num='${num}']`),
+            newButton = document.querySelector(`.how-control__item[data-num='${num}']`);
+        
+
+        setTimeout(() => {
+            let newHeight = newActive.querySelector('.how-content__item').offsetHeight + 'px';
+            newActive.style.height = newHeight;
+            newActive.classList.add('active');
+            newButton.classList.add('active');
+        }, 300);
+    }        
+})
 function howPc() {
-    let itemButtons = document.querySelectorAll('.how-control__item');
+    if (document.querySelector('.how__content').querySelector('.how-content__item-block')) {
+        return;
+    }

-    itemButtons.forEach((button) => {
-        let num = button.dataset.num;
+    let blocks =  document.querySelectorAll('.how-content__item-block'),
+        content = document.querySelector('.how__content');

-        button.onclick = function name(params, index) {
+    blocks.forEach(block => {
+        content.appendChild(block)
+    });
+}
+function howPhone() {
+    if (!document.querySelector('.how__content').querySelector('.how-content__item-block')) {
+        return;
+    }
+    
+    let buttons =  document.querySelectorAll('.how-control__item');

-            let activeContent = document.querySelector('.how__content').querySelector('.active'),
-                activeButton = document.querySelector('.how__control').querySelector('.active');
-
-            if (activeContent.dataset.num == button.dataset.num) return;
+    buttons.forEach(button => {
+        let num = button.dataset.num,
+            block = document.querySelector(`.how-content__item-block[data-num='${num}']`);
            
-            activeContent.style.height = '0px';
-            activeContent.classList.remove('active');
-            activeButton.classList.remove('active');
-
-            let newActive = document.querySelector(`.how-content__item-block[data-num='${num}']`),
-                newButton = document.querySelector(`.how-control__item[data-num='${num}']`);
-            
-
-            setTimeout(() => {
-                let newHeight = newActive.querySelector('.how-content__item').offsetHeight + 'px';
-                newActive.style.height = newHeight;
-                newActive.classList.add('active');
-                newButton.classList.add('active');
-            }, 300);
-        }        
-    })
+            button.after(block);
+    });
 }

-howPc();

-
-// function howPc() {
-//     let itemButtons = document.querySelectorAll('.how-control__item'),
-//         itemBlocks = document.querySelectorAll('.how-content__item-block');
-
-//     itemButtons.forEach((button, index) => {
-//         let block = itemBlocks[index];
-
-//         button.onclick = function () {
-//             let activeContent = document.querySelector('.how__content').querySelector('.active'),
-//                 activeButton = document.querySelector('.how__control').querySelector('.active');
-            
-//             activeContent.style.height = '0px';
-//             activeContent.classList.remove('active');
-//             activeButton.classList.remove('active');
-
-//             setTimeout(() => {
-//                 let newHeight = block.querySelector('.how-content__item').offsetHeight + 'px';
-//                 block.style.height = newHeight;
-//                 block.classList.add('active');
-//                 button.classList.add('active');
-//             }, 300);
-//         }
-//     })
-// }
+// resize
+window.addEventListener('resize', () => {
+    let screenWidth = window.screen.width;
+    
+    if (screenWidth <= 992) {
+        howPhone();
+    }else{
+        howPc();
+    }
+});