Good-Production/template-for-verstka
13
2
Fork 0
Code Pull Requests Releases Wiki Activity

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

Browse Source
This commit is contained in:
Kirill Pet
2024-12-19 01:43:07 +03:00
parent b155852f9c
commit 352e1ead99
4 changed files with 97 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
assets/js/main.js
View File

@@ -13,8 +13,6 @@ const gymSwiper = new Swiper('.gym-swiper', {
}
});
const reviewsSwiper = new Swiper('.reviews-swiper', {
spaceBetween: 24,
// If we need pagination
@@ -42,7 +40,6 @@ const reviewsSwiper = new Swiper('.reviews-swiper', {
}
})
const projectsSwiper = new Swiper('.projects-swiper', {
direction: 'horizontal',
breakpoints: {
@@ -79,27 +76,43 @@ itemButtons.forEach((button) => {
button.onclick = function name(params, index) {
let activeContent = document.querySelector('.how__content').querySelector('.active'),
activeButton = document.querySelector('.how__control').querySelector('.active');
let activeContent = document.querySelector('.how-content__item-block.active'),
activeButton = document.querySelector('.how-control__item.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}']`);
activeContent.style.height = `${activeContent.offsetHeight}px`;
setTimeout(() => {
let newHeight = newActive.querySelector('.how-content__item').offsetHeight + 'px';
newActive.style.height = newHeight;
newActive.classList.add('active');
newButton.classList.add('active');
}, 300);
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');
setTimeout(() => {
newActive.style.height = 'auto';
}, 300);
}, 300);
}, 0);
}
})
let screenWidth = window.screen.width;
if (screenWidth <= 992) {
howPhone();
}else{
howPc();
}
function howPc() {
if (document.querySelector('.how__content').querySelector('.how-content__item-block')) {
return;
@@ -113,7 +126,8 @@ function howPc() {
});
}
function howPhone() {
if (!document.querySelector('.how__content').querySelector('.how-content__item-block')) {
if (!document.querySelector('.how__content').querySelector('.how-content__item-block')) {
return;
}
@@ -126,7 +140,7 @@ function howPhone() {
button.after(block);
});
}
// how end
// resize
window.addEventListener('resize', () => {
@@ -137,4 +151,4 @@ window.addEventListener('resize', () => {
}else{
howPc();
}
});
});