From 8dad2849d08b24f0b24e1169b464a9f966ba46b0 Mon Sep 17 00:00:00 2001 From: Lesia Soloviova Date: Sun, 25 Aug 2024 18:46:37 +0300 Subject: [PATCH 1/2] feat: add review swiper.js --- src/data/reviews.json | 26 ----------- src/index.html | 6 +++ src/js/reviews.js | 59 ------------------------ src/js/swiper.js | 52 +++++++++++++++++++++ src/main.js | 3 +- src/partials/reviews.html | 62 +++++++++++++++++++++++-- src/scss/reviews.scss | 95 ++++++++++++++++++++++++++++++++++----- 7 files changed, 203 insertions(+), 100 deletions(-) delete mode 100644 src/data/reviews.json delete mode 100644 src/js/reviews.js create mode 100644 src/js/swiper.js diff --git a/src/data/reviews.json b/src/data/reviews.json deleted file mode 100644 index 31e5084..0000000 --- a/src/data/reviews.json +++ /dev/null @@ -1,26 +0,0 @@ -[ - { - "review": "Absolutely addictive! Love the colorful levels and the fun storyline. It’s more than just matching!", - "username": "CandyCrusher101" - }, - { - "review": "A sweet twist on match-3 games. Decorating the factory is my favorite part.", - "username": "ChocoFanatic56" - }, - { - "review": "Great for all ages! My kids and I enjoy playing and seeing what’s next in the factory.", - "username": "FamilyGamer88" - }, - { - "review": "The graphics are fantastic, and the puzzles are challenging but fair. Keeps me coming back!", - "username": "PuzzleMaster99" - }, - { - "review": "I really feel like I’m part of the Willy Wonka story. So many creative levels!", - "username": "BookLover415" - }, - { - "review": "Engaging and beautifully designed. The events are super fun too!", - "username": "SweetToothSam" - } -] diff --git a/src/index.html b/src/index.html index 6f549bf..f63d714 100644 --- a/src/index.html +++ b/src/index.html @@ -12,6 +12,12 @@ referrerpolicy="no-referrer" /> + + +
diff --git a/src/js/reviews.js b/src/js/reviews.js deleted file mode 100644 index 514750f..0000000 --- a/src/js/reviews.js +++ /dev/null @@ -1,59 +0,0 @@ -import reviews from '../data/reviews.json'; - -console.log(reviews); - -// Вибираємо контейнери для списку рев'ю та індикаторів -const reviewList = document.querySelector('.review-list'); -const indicatorsContainer = document.querySelector('.slider-indicators'); - -// Змінна для відслідковування поточного слайду -let currentSlide = 0; - -// Створюємо слайди та індикатори -reviews.forEach((review, index) => { - // Створення елементів для кожного рев'ю - const reviewItem = document.createElement('li'); - reviewItem.classList.add('review-item'); - if (index !== currentSlide) { - reviewItem.style.display = 'none'; - } - - const reviewText = document.createElement('p'); - reviewText.classList.add('review-text'); - reviewText.textContent = review.review; - - const reviewUserName = document.createElement('span'); - reviewUserName.classList.add('review-user-name'); - reviewUserName.textContent = review.username; - - reviewItem.appendChild(reviewText); - reviewItem.appendChild(reviewUserName); - reviewList.appendChild(reviewItem); - - // Створення індикаторів - const indicator = document.createElement('div'); - indicator.classList.add('indicator'); - if (index === currentSlide) { - indicator.classList.add('active'); - } - - indicator.addEventListener('click', () => { - changeSlide(index); - }); - - indicatorsContainer.appendChild(indicator); -}); - -// Функція для зміни слайда -function changeSlide(index) { - // Ховаємо поточний слайд - reviewList.children[currentSlide].style.display = 'none'; - indicatorsContainer.children[currentSlide].classList.remove('active'); - - // Відображаємо новий слайд - reviewList.children[index].style.display = 'block'; - indicatorsContainer.children[index].classList.add('active'); - - // Оновлюємо поточний слайд - currentSlide = index; -} diff --git a/src/js/swiper.js b/src/js/swiper.js new file mode 100644 index 0000000..fdc5551 --- /dev/null +++ b/src/js/swiper.js @@ -0,0 +1,52 @@ +new Swiper( + '.swiper', + // If we need pagination + { + pagination: { + el: '.swiper-pagination', + clickable: true, + // dynamicBullets: true, + }, + // Включение/отключение + // перетаскивания на ПК + simulateTouch: true, + // Курсор перетаскивания + grabCursor: true, + + // Управление клавиатурой + keyboard: { + // Включить\выключить + enabled: true, + // Включить\выключить + // только когда слайдер + // в пределах вьюпорта + onlyInViewport: true, + // Включить\выключить + // управление клавишами + // pageUp, pageDown + pageUpDown: true, + }, + + // Управление колесом мыши + mousewheel: { + // Чувствительность колеса мыши + sensitivity: 1, + }, + // Количество слайдов для показа + slidesPerView: 1.08, + + // Отключение функционала + // если слайдов меньше чем нужно + watchOverflow: true, + + // Отступ между слайдами + spaceBetween: 16, + + // Количество пролистываемых слайдов + slidesPerGroup: 1, + + // Активный слайд по центру + // centeredSlides: true, + freemode: true, + } +); diff --git a/src/main.js b/src/main.js index 245ea98..f5447fc 100644 --- a/src/main.js +++ b/src/main.js @@ -1,6 +1,7 @@ import './js/removeMainPageClass.js'; import './js/redirect.js'; import { burgerMenu } from './js/burger.js'; -import './js/reviews.js'; +// import './js/reviews.js'; +import './js/swiper.js'; burgerMenu(); diff --git a/src/partials/reviews.html b/src/partials/reviews.html index 1a58c51..1b10ff7 100644 --- a/src/partials/reviews.html +++ b/src/partials/reviews.html @@ -1,7 +1,63 @@
-
+

Reviews

+
+
+
+
+

+ Absolutely addictive! Love the colorful levels and the fun + storyline. It’s more than just matching! +

+

CandyCrusher101

+
+
+
+
+

+ A sweet twist on match-3 games. Decorating the factory is my + favorite part. +

+

ChocoFanatic56

+
+
+
+
+

+ Great for all ages! My kids and I enjoy playing and seeing what’s + next in the factory. +

+

FamilyGamer88

+
+
+
+
+

+ The graphics are fantastic, and the puzzles are challenging but + fair. Keeps me coming back! +

+

PuzzleMaster99

+
+
+
+
+

+ I really feel like I’m part of the Willy Wonka story. So many + creative levels! +

+

BookLover415

+
+
+
+
+

+ Engaging and beautifully designed. The events are super fun too! +

+

SweetToothSam

+
+
+
+ +
-
    -
    diff --git a/src/scss/reviews.scss b/src/scss/reviews.scss index 829484a..c201d29 100644 --- a/src/scss/reviews.scss +++ b/src/scss/reviews.scss @@ -1,18 +1,91 @@ -.slider-indicators { +// .slider-indicators { +// display: flex; +// justify-content: center; +// margin-top: 20px; +// } + +// .slider-indicators .indicator { +// width: 10px; +// height: 10px; +// background-color: #ccc; +// border-radius: 50%; +// margin: 0 5px; +// cursor: pointer; +// } + +// .slider-indicators .indicator.active { +// background-color: #333; +// } +// .swiper-list { +// display: flex; +// flex-direction: row; +// gap: 16px; +// } +.review-container.container { + padding-left: 0; + padding-right: 0; +} + +.swiper-wrap.swiper { + width: 100%; + height: 215px; + padding: 3px 0 3px 16px; + + // border: 1px solid red; +} + +.review-item { + position: relative; display: flex; justify-content: center; - margin-top: 20px; + flex-direction: column; + align-items: center; + gap: 36px; + + width: 280px; + height: 180px; + border-radius: 16px; + outline: 1px solid $_yellow_color; + + // Adding the quotation mark at the top center + &::before { + content: '\0022'; // This is the left double quotation mark + -webkit-text-stroke-width: 1; + -webkit-text-stroke-color: var(--brown, #915518); + position: absolute; + z-index: 999; + top: -15px; // Adjust this value as needed + left: 50%; + transform: translateX(-50%); + @include font(48, 24); + font-family: $second_font_family; // Adjust the size as needed + color: $_yellow_color; + + font-weight: $regular; // Match the color with your design + } } -.slider-indicators .indicator { - width: 10px; - height: 10px; - background-color: #ccc; - border-radius: 50%; - margin: 0 5px; - cursor: pointer; +.review-text { + width: 266px; + color: $_main_color; + text-align: center; + font-family: $font_family; + @include font(16, 24); + font-style: normal; + font-weight: $light; + @include media(desktop) { + font-weight: $regular; + } } -.slider-indicators .indicator.active { - background-color: #333; +.review-user { + color: #f8f9f3; + + font-family: $font_family; + @include font(20, 24); + font-style: normal; + font-weight: $regular; + @include media(desktop) { + font-weight: $medium; + } } From f8ed09d1c1f5607b78133098fa9887011e4cc7e1 Mon Sep 17 00:00:00 2001 From: Lesia Soloviova Date: Sun, 25 Aug 2024 22:13:24 +0300 Subject: [PATCH 2/2] feat: add reviews styles and markup --- src/img/reviews/fluent_arrow-next.png | Bin 0 -> 633 bytes src/img/reviews/fluent_arrow-prev.png | Bin 0 -> 630 bytes src/img/sprite.svg | 6 ++ src/js/swiper.js | 38 ++++++++- src/partials/reviews.html | 6 +- src/scss/common/_reset.scss | 2 +- src/scss/reviews.scss | 109 ++++++++++++++++++-------- 7 files changed, 122 insertions(+), 39 deletions(-) create mode 100644 src/img/reviews/fluent_arrow-next.png create mode 100644 src/img/reviews/fluent_arrow-prev.png diff --git a/src/img/reviews/fluent_arrow-next.png b/src/img/reviews/fluent_arrow-next.png new file mode 100644 index 0000000000000000000000000000000000000000..eb0799bda292dd2cd3f1b3f492257ece20678c75 GIT binary patch literal 633 zcmV-<0*3vGP)aMOjo3)DYFspP`~4$kv9kt*yR++7~D{F^8nVY$*y_a&bs- zY_p{hmCV7@eMPP8N|EP1*WvsI@72S>=jY+VbB+KKi9{l)00oF~t(Xr%QS5lnl%hU{&Ze<4ZKx2^6`1X5G^LZNDg5QX!gD1^1%i>} z%}8siEAbK^q>>;NKrSDX=adrU0tlsq5CMcrLYM$TAt6)%;VmIt0O2X2ivYq)LN@_~ zheX*b@!29-3sAxUq7UKRZN6p{`AhB46u=f~8Sb}FEYIXhn4T0Q91NcJeX*m`af8+* zg@MgFJE?p40uxI!U{Khe)|jE(q|z3tCznnr>Sc@kAJP)Q&PmmO-89vTIb6_%Z zQ?00g&pvQ6J~QPO3*T&V=?o;Ickukk9eFNN-oNXjvk=3B)4H|<7^pSXN)B_KMk8QB zZmJa(DDyn~5Q+i@ib8m~saA3mvv!kz%xZS5Y`1^{N-$4VI-H%T1F + + + + + + \ No newline at end of file diff --git a/src/js/swiper.js b/src/js/swiper.js index fdc5551..e8e32eb 100644 --- a/src/js/swiper.js +++ b/src/js/swiper.js @@ -1,11 +1,10 @@ -new Swiper( +const swiper = new Swiper( '.swiper', // If we need pagination { pagination: { el: '.swiper-pagination', clickable: true, - // dynamicBullets: true, }, // Включение/отключение // перетаскивания на ПК @@ -33,8 +32,7 @@ new Swiper( sensitivity: 1, }, // Количество слайдов для показа - slidesPerView: 1.08, - + slidesPerView: 1.07, // Отключение функционала // если слайдов меньше чем нужно watchOverflow: true, @@ -48,5 +46,37 @@ new Swiper( // Активный слайд по центру // centeredSlides: true, freemode: true, + + breakpoints: { + // Define breakpoints + 1440: { + // Desktop size + slidesPerView: 4.18, + spaceBetween: 36, + + navigation: { + nextEl: '.swiper-button-next', + prevEl: '.swiper-button-prev', + }, + }, + }, } ); + +function updateSwiperSettings() { + const windowWidth = window.innerWidth; + + if (windowWidth >= 1440) { + swiper.pagination.destroy(); // Remove pagination + swiper.pagination.el.style.display = 'none'; // Hide pagination elements + } else { + swiper.pagination.init(); // Reinitialize pagination + swiper.pagination.el.style.display = ''; // Show pagination elements + } +} + +// Call the function on page load +updateSwiperSettings(); + +// Add an event listener to update settings on resize +window.addEventListener('resize', updateSwiperSettings); diff --git a/src/partials/reviews.html b/src/partials/reviews.html index 1b10ff7..6e3443b 100644 --- a/src/partials/reviews.html +++ b/src/partials/reviews.html @@ -57,7 +57,11 @@

    Reviews

    - +
    + + +
    +
    diff --git a/src/scss/common/_reset.scss b/src/scss/common/_reset.scss index d511dff..818463b 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/reviews.scss b/src/scss/reviews.scss index c201d29..bf2e4c1 100644 --- a/src/scss/reviews.scss +++ b/src/scss/reviews.scss @@ -1,37 +1,23 @@ -// .slider-indicators { -// display: flex; -// justify-content: center; -// margin-top: 20px; -// } - -// .slider-indicators .indicator { -// width: 10px; -// height: 10px; -// background-color: #ccc; -// border-radius: 50%; -// margin: 0 5px; -// cursor: pointer; -// } - -// .slider-indicators .indicator.active { -// background-color: #333; -// } -// .swiper-list { -// display: flex; -// flex-direction: row; -// gap: 16px; -// } .review-container.container { padding-left: 0; padding-right: 0; + + @include media(desktop) { + padding-left: 72px; + padding-right: 72px; + } } .swiper-wrap.swiper { width: 100%; - height: 215px; - padding: 3px 0 3px 16px; + height: 230px; + padding: 10px 0 3px 16px; // border: 1px solid red; + @include media(desktop) { + padding: 64px 0 3px 16px; + height: 300px; + } } .review-item { @@ -47,21 +33,19 @@ border-radius: 16px; outline: 1px solid $_yellow_color; - // Adding the quotation mark at the top center &::before { - content: '\0022'; // This is the left double quotation mark - -webkit-text-stroke-width: 1; - -webkit-text-stroke-color: var(--brown, #915518); + content: '\201D'; + -webkit-text-stroke-width: 1px; + -webkit-text-stroke-color: $_brown_color; position: absolute; z-index: 999; - top: -15px; // Adjust this value as needed + top: 0px; left: 50%; transform: translateX(-50%); @include font(48, 24); - font-family: $second_font_family; // Adjust the size as needed + font-family: $second_font_family; color: $_yellow_color; - - font-weight: $regular; // Match the color with your design + font-weight: $regular; } } @@ -89,3 +73,62 @@ font-weight: $medium; } } + +.swiper-pagination { + gap: 16px; +} +.swiper-pagination .swiper-pagination-bullet { + width: 8px; + height: 8px; + line-height: 20px; + background: $_main_color; + opacity: 1; +} + +.swiper .swiper-pagination-bullet-active { + background-color: $_brown_color; +} + +.swiper .swiper-button-next, +.swiper .swiper-button-prev { + display: none; + @include media(desktop) { + display: flex; + align-items: center; + justify-content: center; + width: 48px; + height: px; + background-color: transparent; + position: absolute; + top: 28px; + right: 10px; // Adjust this value as needed for proper alignment + + &::after { + content: ''; + display: block; + width: 100%; + height: 100%; + background-size: contain; + background-repeat: no-repeat; + background-position: center; + } + } +} + +// Стиль для кнопки "Next" +.swiper .swiper-button-next { + right: 10px; // Відступ справа + + &::after { + background-image: url(../img/reviews/fluent_arrow-next.png); // Заміни на правильний шлях до картинки + } +} + +// Стиль для кнопки "Prev" +.swiper .swiper-button-prev { + left: 10px; // Відступ зліва + + &::after { + background-image: url(../img/reviews/fluent_arrow-prev.png); // Заміни на правильний шлях до картинки + } +}