Full adaptiv whith work swiper

css/main.css

@@ -522,21 +522,27 @@ a {
 .opportunities {
   margin-bottom: 67px;
 }
-.opportunities .swiper {
-  width: 400px;
-  height: 400px;
-}
-@media screen and (max-width: 576px) {
-  .opportunities .container {
-    width: 100%;
-  }
-}
 .opportunities .row {
   row-gap: 20px;
 }
 .opportunities h2 {
   text-align: center;
 }
+@media screen and (max-width: 999px) {
+  .opportunities .swiper1 {
+    width: 80%;
+    height: 400px;
+  }
+}
+@media screen and (max-width: 576px) {
+  .opportunities .swiper1 {
+    width: 90%;
+    height: 400px;
+  }
+  .opportunities .container {
+    width: 100%;
+  }
+}
 .opportunities .chet {
   background-color: #FFE1AD;
   -webkit-box-shadow: 0 10px 50px #FFE1AD;

index.html

@@ -98,32 +98,32 @@ <h2 class="title-2">Возможности</h2>
                 </div>
 
                 <div class="row">
-                    <div class="swiper">
+                    <div class="swiper1">
                         <div class="swiper-wrapper">
-                            <div class="swiper-slide col-lg-3">
+                            <div class="swiper-slide1 col-lg-3">
                                 <div class="opportunities__card nechet">
                                     <img class="card__img" src="./img/opportunities/Chat.svg" alt="chat">
                                     <h3 class="card__name">Общение с классом</h3>
                                     <p class="card__description">Видеосвязь <br>
                                     Чат с классом</p> 
                                 </div>
                             </div>
-                            <div class="swiper-slide col-lg-3">
+                            <div class="swiper-slide1 col-lg-3">
                                 <div class="opportunities__card chet">
                                     <img class="card__img" src="./img/opportunities/Lections.svg" alt="lection">
                                     <h3 class="card__name">Проведение занятий</h3>
                                     <p class="card__description">Презентация файлов<br>
                                         Демонстрация экрана</p> 
                                 </div>
                             </div>
-                            <div class="swiper-slide col-lg-3">
+                            <div class="swiper-slide1 col-lg-3">
                                 <div class="opportunities__card nechet">
                                     <img class="card__img" src="./img/opportunities/Check.svg" alt="check">
                                     <h3 class="card__name">Посещаемость</h3>
                                     <p class="card__description">Автоматическое <br>отслеживание <br>присутствующих</p> 
                                 </div>
                             </div>
-                            <div class="swiper-slide col-lg-3">
+                            <div class="swiper-slide1 col-lg-3">
                                 <div class="opportunities__card chet">
                                     <img class="card__img" src="./img/opportunities/Hist.svg" alt="hist">
                                     <h3 class="card__name">История занятий</h3>

js/swiper.js

@@ -1,39 +1,63 @@
-/*
+
 import Swiper from '../node_modules/swiper/swiper-bundle.min.mjs';
 
 import Navigation from '../node_modules/swiper/modules/navigation.min.mjs';
 import Pagination from '../node_modules/swiper/modules/pagination.min.mjs';
-*/
 
+/*
 import Swiper from 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.mjs'
 
 import Navigation from 'https://cdn.jsdelivr.net/npm/swiper@11/modules/navigation.min.mjs';
 import Pagination from 'https://cdn.jsdelivr.net/npm/swiper@11/modules/pagination.min.mjs';
+*/
 
-const swiper = new Swiper('.swiper', {
-    // configure Swiper to use modules
-    modules: [Navigation, Pagination],
-  });
 
+const swp = document.querySelector(".swiper1");
 
-/*
-    // Optional parameters
-    //direction: 'vertical',
-    loop: true,
+const swp_slides = document.querySelectorAll(".swiper-slide1");
+
+function handleResize(){
+  console.log(window.screen.width < 999);
+
+  if( window.screen.width < 999){
+    swp.classList.add("swiper");
+    [...swp_slides].forEach(swp_slide =>{
+      swp_slide.classList.add("swiper-slide");
+    })
+
+    swiper1();
+  }
+
+  else{
+    swp.classList.remove("swiper");
+    [...swp_slides].forEach(swp_slide =>{
+      swp_slide.classList = "";
+      swp_slide.classList.add("swiper-slide1");
+    })
+  }
+  //.log(`Новые размеры: ${window.innerWidth}x${window.innerHeight}`);
 
+}
+
+if (window.addEventListener) {
+  window.addEventListener('resize', handleResize);
+}
+else if (window.attachEvent) {
+  window.attachEvent('onresize', handleResize);
+}
+
+
+
+
+function swiper1(){
+  const swiper = new Swiper('.swiper', {
+    // configure Swiper to use modules
+    modules: [Navigation, Pagination],
+    loop: true,
     // If we need pagination
     pagination: {
       el: '.swiper-pagination',
+      clickable:true,
     },
-  
-    // Navigation arrows
-    navigation: {
-      nextEl: '.swiper-button-next',
-      prevEl: '.swiper-button-prev',
-    },
-  
-    // And if we need scrollbar
-    scrollbar: {
-      el: '.swiper-scrollbar',
-    },
-*/
+  });
+}

scss/blocks/_card.scss

@@ -25,4 +25,5 @@
             width: 45%;
         }
     }
+
 }

scss/blocks/_opportunities.scss

@@ -1,14 +1,5 @@
 .opportunities{
     margin-bottom: 67px;
-
-    .swiper {
-        width: 400px;
-        height: 400px;
-      }
-
-    @include mediaMobile{
-
-    }
 
     .row {
         row-gap: 20px;
@@ -17,6 +8,19 @@
         text-align: center;
     }
 
+    @include mediaTablet{
+        .swiper1 {
+            width: 80%;
+            height: 400px;
+          }
+    }
+
+    @include mediaMobile{
+        .swiper1 {
+            width: 90%;
+            height: 400px;
+          }
+    }
 
     .chet{
         background-color: $secondary-light;