Merge pull request #19 from LesiaUKR/reviews

fix: reviews swiper fix
LesiaUKR · Aug 25, 2024 · bf3d49d · bf3d49d
2 parents 0ea98a3 + 1a2a1c2
commit bf3d49d
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 59 deletions.
diff --git a/src/index.html b/src/index.html
@@ -11,13 +11,13 @@
       crossorigin="anonymous"
       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>
+    <link rel="stylesheet" href="./scss/styles.scss" />
   </head>
   <body>
     <header>

diff --git a/src/js/swiper.js b/src/js/swiper.js
@@ -1,65 +1,64 @@
-const swiper = new Swiper(
-  '.swiper',
-  // If we need pagination
-  {
-    pagination: {
-      el: '.swiper-pagination',
-      clickable: true,
-    },
-    // Включение/отключение
-    // перетаскивания на ПК
-    simulateTouch: true,
-    // Курсор перетаскивания
-    grabCursor: true,
+import Swiper from 'swiper';
+import 'swiper/swiper-bundle.css';
 
-    // Управление клавиатурой
-    keyboard: {
-      // Включить\выключить
-      enabled: true,
-      // Включить\выключить
-      // только когда слайдер
-      // в пределах вьюпорта
-      onlyInViewport: true,
-      // Включить\выключить
-      // управление клавишами
-      // pageUp, pageDown
-      pageUpDown: true,
-    },
+let swiper = new Swiper('.swiper', {
+  pagination: {
+    el: '.swiper-pagination',
+    clickable: true,
+  },
+  // Включение/отключение
+  // перетаскивания на ПК
+  simulateTouch: true,
+  // Курсор перетаскивания
+  grabCursor: true,
 
-    // Управление колесом мыши
-    mousewheel: {
-      // Чувствительность колеса мыши
-      sensitivity: 1,
-    },
-    // Количество слайдов для показа
-    slidesPerView: 1,
-    // Отключение функционала
-    // если слайдов меньше чем нужно
-    watchOverflow: true,
+  // Управление клавиатурой
+  keyboard: {
+    // Включить\выключить
+    enabled: true,
+    // Включить\выключить
+    // только когда слайдер
+    // в пределах вьюпорта
+    onlyInViewport: true,
+    // Включить\выключить
+    // управление клавишами
+    // pageUp, pageDown
+    pageUpDown: true,
+  },
 
-    // Отступ между слайдами
-    spaceBetween: 16,
+  // Управление колесом мыши
+  mousewheel: {
+    // Чувствительность колеса мыши
+    sensitivity: 1,
+  },
+  // Количество слайдов для показа
+  slidesPerView: 1,
+  // Отключение функционала
+  // если слайдов меньше чем нужно
+  watchOverflow: true,
 
-    // Количество пролистываемых слайдов
-    slidesPerGroup: 1,
+  // Отступ между слайдами
+  spaceBetween: 16,
 
-    // Активный слайд по центру
-    // centeredSlides: true,
-    freemode: true,
+  // Количество пролистываемых слайдов
+  slidesPerGroup: 1,
 
-    breakpoints: {
-      1440: {
-        slidesPerView: 4,
-        spaceBetween: 56,
+  // Активный слайд по центру
+  // centeredSlides: true,
+  freemode: true,
 
-        navigation: {
-          nextEl: '.swiper-button-next',
-          prevEl: '.swiper-button-prev',
-        },
+  breakpoints: {
+    1440: {
+      slidesPerView: 4,
+      spaceBetween: 56,
+
+      navigation: {
+        nextEl: '.swiper-button-next',
+        prevEl: '.swiper-button-prev',
       },
     },
-  }
-);
+  },
+});
 
 function updateSwiperSettings() {
   const windowWidth = window.innerWidth;
@@ -73,8 +72,6 @@ function updateSwiperSettings() {
   }
 }
 
-// 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,6 +1,5 @@
 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
@@ -58,8 +58,6 @@ <h2 class="section-title" text="Reviews">Reviews</h2>
         </div>
       </div>
       <div class="swiper-pagination"></div>
-
-      <!-- Добавляем если нам нужны стрелки управления -->
       <div class="swiper-button-prev"></div>
       <div class="swiper-button-next"></div>
     </div>