You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
140 lines
3.5 KiB
140 lines
3.5 KiB
'use strict';
|
|
|
|
const gymSwiper = new Swiper('.gym-swiper', {
|
|
direction: 'horizontal',
|
|
breakpoints: {
|
|
320:{
|
|
slidesPerView: 1.20,
|
|
spaceBetween: 24,
|
|
},
|
|
996: {
|
|
slidesPerView: 3
|
|
},
|
|
}
|
|
});
|
|
|
|
|
|
|
|
const reviewsSwiper = new Swiper('.reviews-swiper', {
|
|
spaceBetween: 24,
|
|
// If we need pagination
|
|
pagination: {
|
|
el: '.swiper-pagination',
|
|
},
|
|
|
|
// Navigation arrows
|
|
navigation: {
|
|
nextEl: '.swiper-button-next',
|
|
prevEl: '.swiper-button-prev',
|
|
},
|
|
|
|
// And if we need scrollbar
|
|
scrollbar: {
|
|
el: '.swiper-scrollbar',
|
|
},
|
|
runCallbacksOnInit: true,
|
|
// === new change
|
|
on: {
|
|
slideChange: function(){
|
|
let offer = document.querySelector('#numberReviews');
|
|
offer.innerHTML = (this.activeIndex + 1);
|
|
}
|
|
}
|
|
})
|
|
|
|
|
|
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() {
|
|
if (document.querySelector('.how__content').querySelector('.how-content__item-block')) {
|
|
return;
|
|
}
|
|
|
|
let blocks = document.querySelectorAll('.how-content__item-block'),
|
|
content = document.querySelector('.how__content');
|
|
|
|
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');
|
|
|
|
buttons.forEach(button => {
|
|
let num = button.dataset.num,
|
|
block = document.querySelector(`.how-content__item-block[data-num='${num}']`);
|
|
|
|
button.after(block);
|
|
});
|
|
}
|
|
|
|
|
|
// resize
|
|
window.addEventListener('resize', () => {
|
|
let screenWidth = window.screen.width;
|
|
|
|
if (screenWidth <= 992) {
|
|
howPhone();
|
|
}else{
|
|
howPc();
|
|
}
|
|
}); |