toggleSwiper

Ayronhayd · Aug 20, 2024 · aaaeb10 · aaaeb10
1 parent 0619fb3
commit aaaeb10
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 41 deletions.
diff --git a/source/index.html b/source/index.html
@@ -730,8 +730,8 @@ <h3>Елена Пирогова</h3>
     <section class="adv" data-test="adv">
       <h2 class="adv__title title" data-shadow="Преимущества">Преимущества</h2>
 
-      <div class="adv__swiper adv__swiper-js">
-        <ul class="adv__wrapper adv__wrapper-js">
+      <div class="adv__swiper swiper">
+        <ul class="adv__wrapper  adv__wrapper-js swiper-wrapper">
           <li class="adv__slide swiper-slide">
             <div class="adv__slide-content adv__slide-content-shield">
               <h3>Безопасность</h3>
@@ -773,17 +773,14 @@ <h3>Безопасность</h3>
             </div>
           </li>
         </ul>
-
-        <div class="adv__button-wrap">
-          <button class="adv__button-prev swiper__button-prev swiper-button" type="button" tabindex="0">
-            <span class="visually-hidden">Слайдер-назад</span>
-          </button>
-          <button class="adv__button-next swiper__button-next swiper-button" type="button" tabindex="0">
-            <span class="visually-hidden">Слайдер-вперед</span>
-          </button>
-        </div>
-
-
+      </div>
+      <div class="adv__button-wrap">
+        <button class="adv__button-prev swiper__button-prev swiper-button" type="button" tabindex="0">
+          <span class="visually-hidden">Слайдер-назад</span>
+        </button>
+        <button class="adv__button-next swiper__button-next swiper-button" type="button" tabindex="0">
+          <span class="visually-hidden">Слайдер-вперед</span>
+        </button>
       </div>
     </section>
 

diff --git a/source/js/main.js b/source/js/main.js
@@ -1,33 +1,28 @@
 import { closePressing } from './modules/close-pressing';
 import { activateHeroSlider } from './modules/swiper-hero';
 import { activateToursSlider } from './modules/swiper-tours';
-import { initTrainingSlider } from './modules/swiper-training';
+import { activateTrainingSlider } from './modules/swiper-training';
 import { activateReviewsSlider } from './modules/swiper-reviews';
-// import { initAdvSlider } from './modules/swiper-adv';
+import { activateAdvSlider } from './modules/swiper-adv';
+import { toggleSwiper } from './modules/toggle-swiper';
 
 closePressing();
 activateHeroSlider();
 activateToursSlider();
 activateReviewsSlider();
-// initAdvSlider();
+activateAdvSlider();
 
 
-// не смог понять что с нижним пожключением слайдера не так если он подключен раньше других-
-// то все перестают работать
-initTrainingSlider();
-
-// const swiperOn = document.querySelector('.adv__wrapper-js');
-// const swiperWrapperOn = document.querySelector('.adv__wrapper-js');
-// swiperOn.classList.remove('swiper');
-// swiperWrapperOn.classList.remove('swiper-wrapper');
-
+onload = function() {
+  toggleSwiper();
+};
 
-// swiperOn.classList.add('swiper-wrapper');
+window.onresize = function() {
+  toggleSwiper();
+};
 
 
-// if (document.documentElement.clientWidth < 1439) {
-
-// } else {
-
-// };
+// не смог понять что с нижним пожключением слайдера не так если он подключен раньше других-
+// то все перестают работать
+activateTrainingSlider();
 
diff --git a/source/js/modules/swiper-adv.js b/source/js/modules/swiper-adv.js
@@ -2,7 +2,7 @@ import Swiper from 'swiper';
 import { Navigation } from 'swiper/modules';
 import 'swiper/css';
 
-const initAdvSlider = () => {
+const activateAdvSlider = () => {
   const swiperAdv = new Swiper('.adv__swiper', {
     modules: [Navigation],
     enabled: false,
@@ -12,13 +12,13 @@ const initAdvSlider = () => {
       prevEl: '.adv__button-prev',
     },
 
-    // breakpoints: {
-    //   1440: {
-    //     enabled: true,
-    //   },
-    // },
+    breakpoints: {
+      1440: {
+        enabled: true,
+      },
+    },
   });
   swiperAdv.update();
 };
 
-export { initAdvSlider };
+export { activateAdvSlider };
diff --git a/source/js/modules/swiper-training.js b/source/js/modules/swiper-training.js
@@ -2,7 +2,7 @@ import Swiper from 'swiper';
 import { Navigation } from 'swiper/modules';
 import 'swiper/css';
 
-const initTrainingSlider = () => {
+const activateTrainingSlider = () => {
   const swiperTraining = new Swiper('.training__swiper', {
     modules: [Navigation],
     spaceBetween: 20,
@@ -28,4 +28,4 @@ const initTrainingSlider = () => {
   swiperTraining.update();
 };
 
-export { initTrainingSlider };
+export { activateTrainingSlider };
diff --git a/source/js/modules/toggle-swiper.js b/source/js/modules/toggle-swiper.js
@@ -0,0 +1,15 @@
+const swiperWrapper = document.querySelector('.adv__wrapper');
+
+function toggleSwiper() {
+
+  const width = window.innerWidth;
+
+  if(width < 1440) {
+    swiperWrapper.classList.remove('swiper-wrapper');
+  } else {
+    // если больше
+    swiperWrapper.classList.add('swiper-wrapper');
+  }
+}
+
+export { toggleSwiper };
diff --git a/source/sass/blocks/adv.scss b/source/sass/blocks/adv.scss
@@ -1,3 +1,7 @@
+.adv {
+  position: relative;
+}
+
 .adv__title {
   text-align: center;
   margin: 19px 0 36px;
@@ -17,7 +21,7 @@
     gap: 4px;
     position: absolute;
     right: 45px;
-    top: 62px;
+    top: 10px;
   }
 }