-
+
@@ -28,21 +28,21 @@
-
+
@@ -52,7 +52,7 @@
-
+
diff --git a/js/script.js b/js/script.js
index 76d492e..f2c0dd3 100644
--- a/js/script.js
+++ b/js/script.js
@@ -1,139 +1,108 @@
"use strict"
-document.addEventListener("DOMContentLoaded", function() {
- // Ваш код Swiper та інші дії
- let pageSlider = new Swiper('.slider', {
- speed: 1000,
- scrollbar:{
- el: ".slider__scrolbar",
- draggable: true
+let pageSlider = new Swiper('.slider', {
+ speed: 1000,
+ scrollbar:{
+ el: ".slider__scrollbar",
+ draggable: true
+ },
+ breakpoints: {
+ "320": {
+ slidesPerView:1,
+ centeredSlides: false
},
- breakpoints: {
- "320": {
- slidesPerView:1,
- centeredSlides: false
- },
- "922": {
- slidesPerView:2,
- centeredSlides: true
- }
+ "922": {
+ slidesPerView:2,
+ centeredSlides: true
}
- });
-
- const page = document.querySelector('.page');
- const images = document.querySelectorAll('.slide__picture');
-
- if (images.length) {
- let backgroundSlides = ``;
- let textSlides = ``;
-
- images.forEach(image => {
- backgroundSlides += `
-
-
- `;
- textSlides +=`
-
-
-
-
- ${image.dataset.title ? image.dataset.title : ''}
-
- `;
- });
-
- const background = `
-
-
- ${backgroundSlides}
+ }
+});
+
+const page = document.querySelector('.page');
+const images = document.querySelectorAll('.slide-picture');
+
+if (images.length) {
+ let backgroundSlides = ``;
+ let textSlides = ``;
+
+ images.forEach(image => {
+ backgroundSlides += `
+
+
`;
- const text = `
-
+
-
- ${textSlides}
-
+ textSlides +=`
+
+ ${image.dataset.title ? image.dataset.title : ''}
`;
-
- page.insertAdjacentHTML("afterbegin", background);
- page.insertAdjacentHTML("beforeend", text);
-
- let pageBgSlider = new Swiper('.background', {
- speed: 500
- });
- let pageTextSlider = new Swiper('.text', {
- effect: "fade",
- fadeEffect: {
- crossFade: true
- },
- speed: 1000
- });
-
- //Controll
- pageSlider.controller.control = pageBgSlider;
- pageBgSlider.controller.control = pageTextSlider;
- }
-
- const speed = 800;
- document.addEventListener("click", function (e) {
- const targetElement = e.target;
- const textBlock = document.querySelector('.text');
- textBlock.style.transitionDuration = `${speed}ms`;
-
- //Open image
- if (targetElement.closest('.slide')) {
- const slide = targetElement.closest('.slide');
- const slideImage = document.querySelector('img');
- const activeImage = document.querySelector('.slide__picture.active');
-
- if (slide.classList.contains('swiper-slider-active')) {
- slideImage.classList.add('active');
- textBlock.classList.add('active');
- imageOpen(slideImage);
- } else {
- activeImage ? activeImage.classList.remove('active') : null;
- pageSlider.slideTo(getIndex(slide))
- }
- e.preventDefault();
- }
-
- //Close image
- if (targetElement.closest('.open-image')) {
- const openImage = targetElement.closest('.open-image');
- const activeImage = document.querySelector('.slide__picture.active');
- const imagePos = getImagePos(activeImage);
-
- openImage.style.cssText = `
- position: fixed;
- left: ${imagePos.left}px;
- top: ${imagePos.top}px;
- width: ${imagePos.width}px;
- height: ${imagePos.height}px;
- transition: all ${speed}ms;
- `;
- setTimeout(() => {
- activeImage.classList.remove('active');
- activeImage.style.opacity = 1;
- openImage.remove();
- }, speed);
-
- textBlock.classList.remove('active');
+ });
+
+ const background = `
+
+
+ `;
+ const text = `
+
+ ${backgroundSlides}
+
+
+
+ `;
+
+ page.insertAdjacentHTML("afterbegin", background);
+ page.insertAdjacentHTML("beforeend", text);
+
+ let pageBgSlider = new Swiper('.background', {
+ speed: 500
+ });
+ let pageTextSlider = new Swiper('.text', {
+ effect: "fade",
+ fadeEffect: {
+ crossFade: true
+ },
+ speed: 1000
+ });
+
+ //Controll
+ pageSlider.controller.control = pageBgSlider;
+ pageBgSlider.controller.control = pageTextSlider;
+}
+
+const speed = 800;
+document.addEventListener("click", function (e) {
+ const targetElement = e.target;
+ const textBlock = document.querySelector('.text');
+ textBlock.style.transitionDuration = `${speed}ms`;
+
+ //Open image
+ if (targetElement.closest('.slide')) {
+ const slide = targetElement.closest('.slide');
+ const slideImage = slide.querySelector('img');
+ const activeImage = document.querySelector('.slide-picture.active');
+
+ if (slide.classList.contains('swiper-slide-active')) {
+ slideImage.classList.add('active');
+ textBlock.classList.add('active');
+ imageOpen(slideImage);
+ } else {
+ activeImage ? activeImage.classList.remove('active') : null;
+ pageSlider.slideTo(getIndex(slide))
}
- })
-
- function getIndex(el) {
- return Array.from(el.parentNode.children).indexOf(el);
+ e.preventDefault();
}
- function imageOpen(image) {
- const imagePos = getImagePos(image);
-
- const openImage = image.cloneNode();
- const openImageBlock = document.createElement('div');
- openImageBlock.classList.add('open-image');
- openImageBlock.append(openImage);
-
- openImageBlock.style.cssText = `
+
+ //Close image
+ if (targetElement.closest('.open-image')) {
+ const openImage = targetElement.closest('.open-image');
+ const activeImage = document.querySelector('.slide-picture.active');
+ const imagePos = getImagePos(activeImage);
+
+ openImage.style.cssText = `
position: fixed;
left: ${imagePos.left}px;
top: ${imagePos.top}px;
@@ -141,24 +110,52 @@ document.addEventListener("DOMContentLoaded", function() {
height: ${imagePos.height}px;
transition: all ${speed}ms;
`;
-
- document.body.append(openImageBlock);
-
setTimeout(() => {
- image.style.opacity = 0;
- openImageBlock.style.left = 0;
- openImageBlock.style.top = 0;
- openImageBlock.style.width = '100%';
- openImageBlock.style.height = '100%';
- }, 0);
+ activeImage.classList.remove('active');
+ activeImage.style.opacity = 1;
+ openImage.remove();
+ }, speed);
+
+ textBlock.classList.remove('active');
}
-
- function getImagePos(image) {
- return {
- left: image.getBoundingClientRect().left,
- top: image.getBoundingClientRect().top,
- width: image.offsetWidth,
- height: image.offsetHeight
- }
+})
+
+function getIndex(el) {
+ return Array.from(el.parentNode.children).indexOf(el);
+}
+function imageOpen(image) {
+ const imagePos = getImagePos(image);
+
+ const openImage = image.cloneNode();
+ const openImageBlock = document.createElement('div');
+ openImageBlock.classList.add('open-image');
+ openImageBlock.append(openImage);
+
+ openImageBlock.style.cssText = `
+ position: fixed;
+ left: ${imagePos.left}px;
+ top: ${imagePos.top}px;
+ width: ${imagePos.width}px;
+ height: ${imagePos.height}px;
+ transition: all ${speed}ms;
+ `;
+
+ document.body.append(openImageBlock);
+
+ setTimeout(() => {
+ image.style.opacity = 0;
+ openImageBlock.style.left = 0;
+ openImageBlock.style.top = 0;
+ openImageBlock.style.width = '100%';
+ openImageBlock.style.height = '100%';
+ }, 0);
+}
+
+function getImagePos(image) {
+ return {
+ left: image.getBoundingClientRect().left,
+ top: image.getBoundingClientRect().top,
+ width: image.offsetWidth,
+ height: image.offsetHeight
}
- });
+};
+ ${textSlides}
+
+