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.
418 lines
13 KiB
418 lines
13 KiB
document.addEventListener('DOMContentLoaded', function() {
|
|
// Main slider
|
|
const mainSwiper = new Swiper('.main-slider', {
|
|
effect: 'fade',
|
|
fadeEffect: { crossFade: true },
|
|
autoplay: { delay: 5000, disableOnInteraction: false },
|
|
loop: true
|
|
});
|
|
|
|
// Ingredients slider
|
|
const swiper = new Swiper('.ingredients-swiper', {
|
|
slidesPerView: 5,
|
|
spaceBetween: -40,
|
|
centeredSlides: true,
|
|
centeredSlidesBounds: true,
|
|
loop: true,
|
|
loopAdditionalSlides: 25, // 🔥 вот он!
|
|
autoplay: {
|
|
delay: 4000,
|
|
disableOnInteraction: false,
|
|
},
|
|
navigation: {
|
|
nextEl: '.swiper-button-next',
|
|
prevEl: '.swiper-button-prev',
|
|
},
|
|
watchSlidesProgress: true,
|
|
slideToClickedSlide: true,
|
|
effect: 'slide',
|
|
speed: 800,
|
|
on: {
|
|
init() {
|
|
updateSlideStates(this);
|
|
},
|
|
slideChange() {
|
|
updateSlideStates(this);
|
|
},
|
|
}
|
|
});
|
|
|
|
function updateSlideStates(swiper) {
|
|
const slides = swiper.slides;
|
|
|
|
slides.forEach((slide) => {
|
|
slide.style.opacity = '0.2';
|
|
slide.style.transform = 'translateZ(-200px) scale(0.7)';
|
|
slide.style.zIndex = '1';
|
|
});
|
|
|
|
const activeSlide = [...slides].find((s) => s.classList.contains('swiper-slide-active'));
|
|
if (!activeSlide) return;
|
|
|
|
const updateSlide = (slide, z, scale, opacity, zIndex) => {
|
|
if (slide) {
|
|
slide.style.transform = `translateZ(${z}px) scale(${scale})`;
|
|
slide.style.opacity = opacity;
|
|
slide.style.zIndex = zIndex;
|
|
}
|
|
};
|
|
|
|
updateSlide(activeSlide, 0, 1, 1, 10);
|
|
|
|
const getPrev = (el, n) => {
|
|
let node = el;
|
|
for (let i = 0; i < n; i++) {
|
|
node = node.previousElementSibling || swiper.slides[swiper.slides.length - 1];
|
|
}
|
|
return node;
|
|
};
|
|
|
|
const getNext = (el, n) => {
|
|
let node = el;
|
|
for (let i = 0; i < n; i++) {
|
|
node = node.nextElementSibling || swiper.slides[0];
|
|
}
|
|
return node;
|
|
};
|
|
|
|
updateSlide(getPrev(activeSlide, 1), -100, 0.85, 0.5, 6);
|
|
updateSlide(getPrev(activeSlide, 2), -200, 0.75, 0.3, 4);
|
|
|
|
updateSlide(getNext(activeSlide, 1), -100, 0.85, 0.5, 6);
|
|
updateSlide(getNext(activeSlide, 2), -200, 0.75, 0.3, 4);
|
|
}
|
|
|
|
// Specialists slider
|
|
const specialistsSwiper = new Swiper('.main-specialists_wrapper', {
|
|
slidesPerView: 1,
|
|
spaceBetween: 20,
|
|
speed: 1000,
|
|
loop: true,
|
|
autoplay: {
|
|
delay: 6000,
|
|
disableOnInteraction: false,
|
|
},
|
|
navigation: {
|
|
prevEl: '.main-specialists .swiper-button-prev',
|
|
nextEl: '.main-specialists .swiper-button-next',
|
|
},
|
|
pagination: {
|
|
el: '.main-specialists .swiper-pagination',
|
|
clickable: true,
|
|
},
|
|
breakpoints: {
|
|
320: {
|
|
slidesPerView: 1,
|
|
spaceBetween: 10
|
|
},
|
|
768: {
|
|
slidesPerView: 2,
|
|
spaceBetween: 15
|
|
},
|
|
1024: {
|
|
slidesPerView: 3,
|
|
spaceBetween: 20
|
|
}
|
|
}
|
|
});
|
|
|
|
// food slider
|
|
|
|
const reviewsSwiper = new Swiper('.main-food_reviews-slider', {
|
|
slidesPerView: 1,
|
|
spaceBetween: 20,
|
|
loop: false, // Отключаем loop
|
|
autoplay: {
|
|
delay: 5000,
|
|
disableOnInteraction: false,
|
|
},
|
|
navigation: {
|
|
nextEl: '.main-food_reviews .swiper-button-next',
|
|
prevEl: '.main-food_reviews .swiper-button-prev',
|
|
},
|
|
on: {
|
|
init: function () {
|
|
updatePagination(this);
|
|
},
|
|
slideChange: function () {
|
|
updatePagination(this);
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
|
|
const whySwiper = new Swiper('.main-why_swiper', {
|
|
slidesPerView: 1,
|
|
spaceBetween: 20,
|
|
loop: true,
|
|
navigation: {
|
|
nextEl: '.main-why_swiper .swiper-button-next',
|
|
prevEl: '.main-why_swiper .swiper-button-prev',
|
|
},
|
|
});
|
|
|
|
|
|
function updatePagination(swiper) {
|
|
const currentSlide = swiper.activeIndex + 1; // С 1
|
|
const totalSlides = swiper.slides.length;
|
|
const indexElement = document.querySelector('.main-food_reviews-slider-index');
|
|
if (indexElement) {
|
|
indexElement.textContent = `${currentSlide}/${totalSlides}`;
|
|
}
|
|
}
|
|
|
|
// reviews slider
|
|
|
|
let market = new Swiper(".marketplace__swiper ", {
|
|
slidesPerView: 'auto',
|
|
spaceBetween: 13,
|
|
|
|
});
|
|
|
|
// treats slider
|
|
|
|
const treatsSwiper = new Swiper('.main-treats_reviews-slider', {
|
|
slidesPerView: 1,
|
|
spaceBetween: 20,
|
|
loop: false, // Отключаем loop
|
|
autoplay: {
|
|
delay: 5000,
|
|
disableOnInteraction: false,
|
|
},
|
|
navigation: {
|
|
nextEl: '.main-food_reviews .swiper-button-next',
|
|
prevEl: '.main-food_reviews .swiper-button-prev',
|
|
},
|
|
on: {
|
|
init: function () {
|
|
updatePaginationTreats(this);
|
|
},
|
|
slideChange: function () {
|
|
updatePaginationTreats(this);
|
|
}
|
|
}
|
|
});
|
|
|
|
function updatePaginationTreats(swiper) {
|
|
const currentSlideTreats = swiper.activeIndex + 1; // С 1
|
|
const totalSlidesTreats = swiper.slides.length;
|
|
const indexElementTreats = document.querySelector('.main-treats_reviews-slider-index ');
|
|
if (indexElementTreats) {
|
|
indexElementTreats.textContent = `${currentSlideTreats}/${totalSlidesTreats}`;
|
|
}
|
|
}
|
|
|
|
// smi slider
|
|
|
|
let smigSlider = new Swiper(".smiSlider", {
|
|
slidesPerView: 3.3,
|
|
spaceBetween: 40,
|
|
navigation: {
|
|
nextEl: '.smiSlider-next',
|
|
prevEl: '.smiSlider-prev'
|
|
},
|
|
breakpoints: {
|
|
300: {
|
|
slidesPerView: 1.6,
|
|
spaceBetween: 20,
|
|
},
|
|
776: {
|
|
slidesPerView: 1.6,
|
|
spaceBetween: 40,
|
|
},
|
|
991: {
|
|
slidesPerView: 2.4,
|
|
spaceBetween: 40,
|
|
},
|
|
1400: {
|
|
slidesPerView: 2.8,
|
|
spaceBetween: 40,
|
|
},
|
|
}
|
|
});
|
|
|
|
// Bot slider
|
|
const botSwiper = new Swiper('.bot-slider', {
|
|
effect: 'fade',
|
|
fadeEffect: { crossFade: true },
|
|
autoplay: { delay: 5000, disableOnInteraction: false },
|
|
loop: true,
|
|
pagination: {
|
|
el: '.swiper-pagination',
|
|
clickable: true,
|
|
bulletClass: 'swiper-pagination-bullet',
|
|
bulletActiveClass: 'swiper-pagination-bullet-active',
|
|
},
|
|
});
|
|
|
|
|
|
//productswiper
|
|
const productSwiper = new Swiper('.main-food_products-card-slider', {
|
|
effect: 'fade',
|
|
fadeEffect: { crossFade: true },
|
|
loop: true,
|
|
pagination: {
|
|
el: '.swiper-dots',
|
|
clickable: true,
|
|
bulletClass: 'swiper-pagination-bullet',
|
|
bulletActiveClass: 'swiper-pagination-bullet-active',
|
|
},
|
|
});
|
|
|
|
// cosmopet x slider
|
|
|
|
let cosmopetSwiper = new Swiper(".cosmopet-x__swiper", {
|
|
slidesPerView: 3.3,
|
|
spaceBetween: 40,
|
|
navigation: {
|
|
nextEl: '.cosmopet-next',
|
|
prevEl: '.cosmopet-prev'
|
|
},
|
|
breakpoints: {
|
|
300: {
|
|
slidesPerView: 1.6,
|
|
spaceBetween: 20,
|
|
},
|
|
776: {
|
|
slidesPerView: 1.6,
|
|
spaceBetween: 40,
|
|
},
|
|
991: {
|
|
slidesPerView: 2.4,
|
|
spaceBetween: 40,
|
|
},
|
|
1400: {
|
|
slidesPerView: 2.8,
|
|
spaceBetween: 40,
|
|
},
|
|
}
|
|
});
|
|
|
|
// Gallery slider
|
|
|
|
const mosaicswiper = new Swiper('.mosaic-swiper', {
|
|
slidesPerView: 'auto',
|
|
spaceBetween: 20,
|
|
loop: true,
|
|
loopAdditionalSlides: 29, // Дополнительные клоны для плавности
|
|
allowTouchMove: false // Отключает перетаскивание
|
|
});
|
|
|
|
// Quiz
|
|
const truthContents = document.querySelectorAll('.truth_content');
|
|
let currentIndex = 0;
|
|
let correctAnswers = 0;
|
|
|
|
truthContents.forEach(content => {
|
|
const successBtn = content.querySelector('.success_btn');
|
|
const errorBtn = content.querySelector('.error_btn');
|
|
const nextBtn = content.querySelectorAll(".next_btn");
|
|
const truthSuccess = content.querySelector('.truth_success');
|
|
const truthError = content.querySelector('.truth_error');
|
|
const truthDefault = content.querySelector('.truth_default');
|
|
|
|
if (successBtn) {
|
|
successBtn.addEventListener('click', function () {
|
|
truthDefault.style.display = 'none';
|
|
truthSuccess.classList.add('show');
|
|
correctAnswers++;
|
|
});
|
|
}
|
|
|
|
if (errorBtn) {
|
|
errorBtn.addEventListener('click', function () {
|
|
truthDefault.style.display = 'none';
|
|
truthError.classList.add('show');
|
|
});
|
|
}
|
|
|
|
if (nextBtn) {
|
|
nextBtn.forEach(btn => {
|
|
btn.addEventListener('click', function () {
|
|
truthSuccess.classList.contains('show') ? truthSuccess.classList.remove('show') : truthError.classList.remove('show');
|
|
content.classList.remove('active');
|
|
|
|
currentIndex++;
|
|
|
|
if (currentIndex < truthContents.length) {
|
|
truthContents[currentIndex].classList.add('active');
|
|
}
|
|
if (truthContents.length - currentIndex == 1) {
|
|
truthContents[currentIndex].querySelector(".truth_points-corrects").innerHTML = correctAnswers;
|
|
truthContents[currentIndex].querySelector(".truth_points-all").innerHTML = currentIndex ;
|
|
}
|
|
})
|
|
});
|
|
}
|
|
|
|
// Initial visibility
|
|
if (truthDefault) {
|
|
truthDefault.style.display = 'block';
|
|
}
|
|
});
|
|
|
|
var slider = carousel_init();
|
|
|
|
function carousel_init() {
|
|
var carousel = document.querySelectorAll('.carousel');
|
|
var options = {
|
|
numVisible: window.innerWidth > 421 ? 5 : 3,
|
|
indicators: false // Removed dots
|
|
};
|
|
var instances = M.Carousel.init(carousel, options);
|
|
document.querySelectorAll('.about_slider_nav').forEach(btn => {
|
|
btn.addEventListener('click', function (e) {
|
|
if (e.target.closest('button').classList.contains('next')) {
|
|
instances[0].next();
|
|
} else {
|
|
instances[0].prev();
|
|
}
|
|
});
|
|
});
|
|
return instances;
|
|
}
|
|
|
|
});
|
|
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
jQuery('.truth-form').on('submit', function(e){
|
|
e.preventDefault();
|
|
var form = new FormData(this);
|
|
var action = jQuery(this).attr('action')
|
|
jQuery.ajax({
|
|
url: action,
|
|
data: form,
|
|
processData: false,
|
|
contentType: false,
|
|
type: 'POST',
|
|
success: function (response) {
|
|
response = JSON.parse(response)
|
|
if (response.status == 'Success'){
|
|
jQuery('.truth_end-text--before').hide()
|
|
jQuery('.truth_end-text--sent').show()
|
|
}
|
|
}
|
|
});
|
|
})
|
|
|
|
|
|
|
|
jQuery('body').on('click', '[data-copy]', async function(){
|
|
|
|
|
|
try {
|
|
const textToCopy = jQuery(this).data('copy');
|
|
await navigator.clipboard.writeText(textToCopy);
|
|
|
|
jQuery(this).addClass('active')
|
|
setTimeout(function(){
|
|
jQuery(this).removeClass('active')
|
|
}, 2000)
|
|
} catch (err) {
|
|
|
|
}
|
|
})
|
|
});
|
|
|
|
|
|
|