From edbfc5fb436480fad6c3c4b65401f7a9d66994db Mon Sep 17 00:00:00 2001 From: Lesia Soloviova Date: Mon, 26 Aug 2024 21:12:10 +0300 Subject: [PATCH 1/3] feat: gallery in process... --- src/index.html | 3 +- src/js/gallery_swiper.js | 23 ++ src/js/{swiper.js => reviews_swiper.js} | 20 +- src/partials/gallery.html | 273 ++++++++++++++++++++++++ src/partials/reviews.html | 2 +- src/scss/common/_reset.scss | 2 +- src/scss/gallery.scss | 95 +++++++++ src/scss/reviews.scss | 10 +- 8 files changed, 404 insertions(+), 24 deletions(-) create mode 100644 src/js/gallery_swiper.js rename src/js/{swiper.js => reviews_swiper.js} (78%) diff --git a/src/index.html b/src/index.html index f52a97c..0d9ed56 100644 --- a/src/index.html +++ b/src/index.html @@ -38,6 +38,7 @@ - + + diff --git a/src/js/gallery_swiper.js b/src/js/gallery_swiper.js new file mode 100644 index 0000000..3fb3aa9 --- /dev/null +++ b/src/js/gallery_swiper.js @@ -0,0 +1,23 @@ +let gallerySwiper = new Swiper('.gallery-swiper', { + pagination: { + el: '.gallery-swiper-pagination', + }, + + spaceBetween: 16, + + breakpoints: { + 1440: { + slidesPerView: 1, + spaceBetween: 110, + + navigation: { + nextEl: '.gallery-swiper-button-prev', + prevEl: '.gallery-swiper-button-next', + }, + pagination: { + el: '.gallery-swiper-pagination', + clickable: true, + }, + }, + }, +}); diff --git a/src/js/swiper.js b/src/js/reviews_swiper.js similarity index 78% rename from src/js/swiper.js rename to src/js/reviews_swiper.js index e63b626..805ab35 100644 --- a/src/js/swiper.js +++ b/src/js/reviews_swiper.js @@ -1,7 +1,7 @@ let swiper = new Swiper('.swiper', { pagination: { - el: '.swiper-pagination', - clickable: true, + el: '.reviews-swiper-pagination', + // clickable: true, }, // Включение/отключение // перетаскивания на ПК @@ -56,19 +56,3 @@ let swiper = new Swiper('.swiper', { }, }, }); - -function updateSwiperSettings() { - const windowWidth = window.innerWidth; - - if (windowWidth >= 1440) { - swiper.pagination.destroy(); - swiper.pagination.el.style.display = 'none'; - } else { - swiper.pagination.init(); - swiper.pagination.el.style.display = ''; - } -} - -updateSwiperSettings(); - -window.addEventListener('resize', updateSwiperSettings); diff --git a/src/partials/gallery.html b/src/partials/gallery.html index d3c9da1..b4c8e59 100644 --- a/src/partials/gallery.html +++ b/src/partials/gallery.html @@ -1,5 +1,278 @@ diff --git a/src/partials/reviews.html b/src/partials/reviews.html index 2679d06..9e1b780 100644 --- a/src/partials/reviews.html +++ b/src/partials/reviews.html @@ -57,7 +57,7 @@

Reviews

-
+
diff --git a/src/scss/common/_reset.scss b/src/scss/common/_reset.scss index 818463b..d511dff 100644 --- a/src/scss/common/_reset.scss +++ b/src/scss/common/_reset.scss @@ -8,7 +8,7 @@ html { *::before, *::after { box-sizing: inherit; - // outline: 1px solid red; + outline: 1px solid red; } body { diff --git a/src/scss/gallery.scss b/src/scss/gallery.scss index e69de29..76ec330 100644 --- a/src/scss/gallery.scss +++ b/src/scss/gallery.scss @@ -0,0 +1,95 @@ +.gallery-swiper { + background-color: $_brown_color; + border-radius: 16px; + padding: 0px 0px 40px 0px; + @include media(desktop) { + position: relative; + width: 1296px; + padding: 20px 110px 50px 110px; + } +} + +.image-slider__slide { + @include media(desktop) { + max-width: 1076px; + } +} + +.image-slider__image { + max-width: 100%; + height: auto; + text-align: center; + outline: 1px solid $_yellow_color; + border-radius: 16px; +} + +.image-slider__image picture { + max-width: 1076px; +} + +.image-slider__image img { + width: 100%; + border-radius: 16px; + content: fit; + @include media(desktop) { + max-width: 1076px; + } +} + +.gallery-swiper .gallery-swiper-button-next, +.gallery-swiper .gallery-swiper-button-prev { + display: none; + @include media(desktop) { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + width: 48px; + height: 48px; + background-color: transparent; + top: 50%; + transform: translateY(-50%); + + &::after { + content: ''; + display: block; + width: 100%; + height: 100%; + background-size: contain; + background-repeat: no-repeat; + background-position: center; + } + } +} + +.gallery-swiper .gallery-swiper-button-next { + right: 40px; + + &::after { + background-image: url(../img/reviews/fluent_arrow-next.png); + } +} + +.gallery-swiper .gallery-swiper-button-prev { + left: 40px; + + &::after { + background-image: url(../img/reviews/fluent_arrow-prev.png); + } +} + +.gallery-swiper-pagination.swiper-pagination { + gap: 16px; + display: block; +} +.gallery-swiper-pagination .swiper-pagination-bullet { + width: 8px; + height: 8px; + line-height: 20px; + background: $_main_color; + opacity: 1; +} + +.gallery-swiper .swiper-pagination-bullet-active { + background-color: $_brown_color; +} diff --git a/src/scss/reviews.scss b/src/scss/reviews.scss index 855589d..4b6e095 100644 --- a/src/scss/reviews.scss +++ b/src/scss/reviews.scss @@ -11,7 +11,7 @@ .swiper-wrap.swiper { width: 100%; height: 230px; - padding: 10px 0 3px 16px; + padding: 10px 0 24px 16px; @include media(desktop) { position: relative; @@ -74,10 +74,14 @@ } } -.swiper-pagination { +.reviews-swiper-pagination { gap: 16px; + display: block; + @include media(desktop) { + display: none; + } } -.swiper-pagination .swiper-pagination-bullet { +.reviews-swiper-pagination .swiper-pagination-bullet { width: 8px; height: 8px; line-height: 20px; From ce441c2b35a16f6edb6af78e11f2582d6b251d3c Mon Sep 17 00:00:00 2001 From: Lesia Soloviova Date: Mon, 26 Aug 2024 21:22:34 +0300 Subject: [PATCH 2/3] feat: gallery mobile pagination fixed --- src/js/gallery_swiper.js | 4 ---- src/partials/gallery.html | 6 ++++-- src/scss/gallery.scss | 5 ++--- 3 files changed, 6 insertions(+), 9 deletions(-) diff --git a/src/js/gallery_swiper.js b/src/js/gallery_swiper.js index 3fb3aa9..2160c93 100644 --- a/src/js/gallery_swiper.js +++ b/src/js/gallery_swiper.js @@ -14,10 +14,6 @@ let gallerySwiper = new Swiper('.gallery-swiper', { nextEl: '.gallery-swiper-button-prev', prevEl: '.gallery-swiper-button-next', }, - pagination: { - el: '.gallery-swiper-pagination', - clickable: true, - }, }, }, }); diff --git a/src/partials/gallery.html b/src/partials/gallery.html index b4c8e59..2cf6ac1 100644 --- a/src/partials/gallery.html +++ b/src/partials/gallery.html @@ -268,11 +268,13 @@

Gallery

- -
+
+ + +
diff --git a/src/scss/gallery.scss b/src/scss/gallery.scss index 76ec330..eca8974 100644 --- a/src/scss/gallery.scss +++ b/src/scss/gallery.scss @@ -1,5 +1,5 @@ .gallery-swiper { - background-color: $_brown_color; + // background-color: $_brown_color; border-radius: 16px; padding: 0px 0px 40px 0px; @include media(desktop) { @@ -78,9 +78,8 @@ } } -.gallery-swiper-pagination.swiper-pagination { +.gallery-swiper-pagination .swiper-pagination { gap: 16px; - display: block; } .gallery-swiper-pagination .swiper-pagination-bullet { width: 8px; From 44b3de3a6895203d07d09c50dcc1494a0b40881a Mon Sep 17 00:00:00 2001 From: Lesia Soloviova Date: Mon, 26 Aug 2024 21:42:24 +0300 Subject: [PATCH 3/3] feat: galerry in process... --- src/js/gallery_swiper.js | 3 +++ src/scss/gallery.scss | 1 + 2 files changed, 4 insertions(+) diff --git a/src/js/gallery_swiper.js b/src/js/gallery_swiper.js index 2160c93..463afcc 100644 --- a/src/js/gallery_swiper.js +++ b/src/js/gallery_swiper.js @@ -3,6 +3,9 @@ let gallerySwiper = new Swiper('.gallery-swiper', { el: '.gallery-swiper-pagination', }, + slidesPerView: 1, // Показувати один слайд + centeredSlides: true, // Центрувати активний слайд + spaceBetween: 16, breakpoints: { diff --git a/src/scss/gallery.scss b/src/scss/gallery.scss index eca8974..22f300f 100644 --- a/src/scss/gallery.scss +++ b/src/scss/gallery.scss @@ -1,5 +1,6 @@ .gallery-swiper { // background-color: $_brown_color; + overflow: hidden; border-radius: 16px; padding: 0px 0px 40px 0px; @include media(desktop) {