Merge pull request #17 from LesiaUKR/reviews

Reviews
LesiaUKR · Aug 25, 2024 · aaedfb8 · aaedfb8
2 parents 85eb46e + f8ed09d
commit aaedfb8
Show file tree

Hide file tree

Showing 11 changed files with 286 additions and 100 deletions.
diff --git a/src/data/reviews.json b/src/data/reviews.json
diff --git a/src/img/reviews/fluent_arrow-next.png b/src/img/reviews/fluent_arrow-next.png
diff --git a/src/img/reviews/fluent_arrow-prev.png b/src/img/reviews/fluent_arrow-prev.png
diff --git a/src/img/sprite.svg b/src/img/sprite.svg
diff --git a/src/index.html b/src/index.html
@@ -12,6 +12,12 @@
       referrerpolicy="no-referrer"
     />
     <link rel="stylesheet" href="./scss/styles.scss" />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
+    />
+
+    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
   </head>
   <body>
     <header>

diff --git a/src/js/reviews.js b/src/js/reviews.js
diff --git a/src/js/swiper.js b/src/js/swiper.js
@@ -0,0 +1,82 @@
+const swiper = new Swiper(
+  '.swiper',
+  // If we need pagination
+  {
+    pagination: {
+      el: '.swiper-pagination',
+      clickable: true,
+    },
+    // Включение/отключение
+    // перетаскивания на ПК
+    simulateTouch: true,
+    // Курсор перетаскивания
+    grabCursor: true,
+
+    // Управление клавиатурой
+    keyboard: {
+      // Включить\выключить
+      enabled: true,
+      // Включить\выключить
+      // только когда слайдер
+      // в пределах вьюпорта
+      onlyInViewport: true,
+      // Включить\выключить
+      // управление клавишами
+      // pageUp, pageDown
+      pageUpDown: true,
+    },
+
+    // Управление колесом мыши
+    mousewheel: {
+      // Чувствительность колеса мыши
+      sensitivity: 1,
+    },
+    // Количество слайдов для показа
+    slidesPerView: 1.07,
+    // Отключение функционала
+    // если слайдов меньше чем нужно
+    watchOverflow: true,
+
+    // Отступ между слайдами
+    spaceBetween: 16,
+
+    // Количество пролистываемых слайдов
+    slidesPerGroup: 1,
+
+    // Активный слайд по центру
+    // 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/main.js b/src/main.js
@@ -1,5 +1,6 @@
 import './js/redirect.js';
 import { burgerMenu } from './js/burger.js';
 // import './js/reviews.js';
+import './js/swiper.js';
 
 burgerMenu();
diff --git a/src/partials/reviews.html b/src/partials/reviews.html
@@ -1,7 +1,67 @@
 <section class="section" id="reviews">
-  <div class="container">
+  <div class="review-container container">
     <h2 class="section-title" text="Reviews">Reviews</h2>
+    <div class="swiper swiper-wrap">
+      <div class="swiper-wrapper">
+        <div class="swiper-slide">
+          <div class="review-item">
+            <p class="review-text">
+              Absolutely addictive! Love the colorful levels and the fun
+              storyline. It’s more than just matching!
+            </p>
+            <p class="review-user">CandyCrusher101</p>
+          </div>
+        </div>
+        <div class="swiper-slide">
+          <div class="review-item">
+            <p class="review-text">
+              A sweet twist on match-3 games. Decorating the factory is my
+              favorite part.
+            </p>
+            <p class="review-user">ChocoFanatic56</p>
+          </div>
+        </div>
+        <div class="swiper-slide">
+          <div class="review-item">
+            <p class="review-text">
+              Great for all ages! My kids and I enjoy playing and seeing what’s
+              next in the factory.
+            </p>
+            <p class="review-user">FamilyGamer88</p>
+          </div>
+        </div>
+        <div class="swiper-slide">
+          <div class="review-item">
+            <p class="review-text">
+              The graphics are fantastic, and the puzzles are challenging but
+              fair. Keeps me coming back!
+            </p>
+            <p class="review-user">PuzzleMaster99</p>
+          </div>
+        </div>
+        <div class="swiper-slide">
+          <div class="review-item">
+            <p class="review-text">
+              I really feel like I’m part of the Willy Wonka story. So many
+              creative levels!
+            </p>
+            <p class="review-user">BookLover415</p>
+          </div>
+        </div>
+        <div class="swiper-slide">
+          <div class="review-item">
+            <p class="review-text">
+              Engaging and beautifully designed. The events are super fun too!
+            </p>
+            <p class="review-user">SweetToothSam</p>
+          </div>
+        </div>
+      </div>
+      <div class="swiper-pagination"></div>
+
+      <!-- Добавляем если нам нужны стрелки управления -->
+      <div class="swiper-button-prev"></div>
+      <div class="swiper-button-next"></div>
+    </div>
   </div>
-  <ul class="review-list"></ul>
-  <div class="slider-indicators"></div>
 </section>
diff --git 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 {