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.
110 lines
2.3 KiB
110 lines
2.3 KiB
'use strict';
|
|
|
|
// slider gallery modal
|
|
const gallery = new Swiper('.gallery__slider', {
|
|
spaceBetween: 100,
|
|
|
|
pagination: {
|
|
el: '.swiper-pagination',
|
|
},
|
|
|
|
navigation: {
|
|
nextEl: '.swiper-button-next',
|
|
prevEl: '.swiper-button-prev',
|
|
},
|
|
|
|
scrollbar: {
|
|
el: '.swiper-scrollbar',
|
|
},
|
|
});
|
|
|
|
let paginationButtons = document.querySelectorAll('.gallery-pagination__item');
|
|
|
|
paginationButtons.forEach(button => {
|
|
let index = button.dataset.countImg;
|
|
|
|
button.onclick = function () {
|
|
gallery.slideTo(index);
|
|
}
|
|
})
|
|
|
|
// open gallery
|
|
let detailImage= document.querySelectorAll('.detail__image');
|
|
detailImage.forEach(button => {
|
|
let index = button.dataset.countImg;
|
|
|
|
button.onclick = function () {
|
|
gallery.slideTo(index);
|
|
|
|
document.querySelector('.gallery').classList.add('active');
|
|
}
|
|
})
|
|
|
|
// close gallery
|
|
|
|
document.querySelector('.gallery__close').onclick = function () {
|
|
document.querySelector('.gallery').classList.remove('active');
|
|
}
|
|
// slider gallery modal
|
|
|
|
// slider gallery main phone
|
|
|
|
// createGalleryPhone('.detail__images', '.detail-images__wrapper', '.detail__image', 980);
|
|
|
|
const detailPhone = new Swiper('.detail__images-phone', {
|
|
spaceBetween: 100,
|
|
|
|
pagination: {
|
|
el: '.swiper-pagination',
|
|
},
|
|
|
|
navigation: {
|
|
nextEl: '.swiper-button-next',
|
|
prevEl: '.swiper-button-prev',
|
|
},
|
|
|
|
scrollbar: {
|
|
el: '.swiper-scrollbar',
|
|
},
|
|
});
|
|
|
|
let detailImagesPhones = document.querySelectorAll('.detail-images-phone__image-block');
|
|
|
|
detailImagesPhones.forEach(button => {
|
|
button.onclick = function (e) {
|
|
let index = button.dataset.countImg;
|
|
|
|
gallery.slideTo(index);
|
|
|
|
document.querySelector('.gallery').classList.add('active');
|
|
}
|
|
})
|
|
|
|
// slider gallery main phone
|
|
|
|
// detail catalog
|
|
const detailCatalot = new Swiper('.detail__catalot', {
|
|
// Navigation arrows
|
|
navigation: {
|
|
nextEl: '.detail-catalot-control__button.next',
|
|
prevEl: '.detail-catalot-control__button.prev',
|
|
},
|
|
breakpoints: {
|
|
1600: {
|
|
slidesPerView: 4,
|
|
},
|
|
1200: {
|
|
slidesPerView: 3,
|
|
},
|
|
780: {
|
|
slidesPerView: 2.2,
|
|
},
|
|
100: {
|
|
slidesPerView: 1.3,
|
|
spaceBetween: 20
|
|
},
|
|
}
|
|
|
|
|
|
});
|
|
// detail catalog
|