Горизонтальная прокрутка сайта из-за swiper.js

Появилась фиолетовая область, как в F12, так и на сайте (прикрепил песочницу). Появилось только на мобилке и планшетах. Перепробовал много стилей, в частности width и margin для разных элементов, выявил что проблема заключается в теге .swiper-wrapper, но он внутренний тег swiper.js, который подключал через ссылку. Добился решения добавлением overflow: hidden; к данному тегу, но тогда обрезаются картинки и становится не понятно что фото листаются. на скринах видно. Как можно решить данную проблему?фото с багом фото без бага

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
html{height:100%}
body{line-height:1}
ol,ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
table{border-collapse:collapse;border-spacing:0}





body {
  background: #10451D;
}
.wrapper {
  margin: 0px auto;
  max-width: 1140px;
  padding: 0px 15px;
}
header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  height: 80px;
  width: 100%;
}
.nav {
  display: flex;
  flex-direction: row;
  gap: 24px;
}
a:hover {
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  border-bottom: 1px solid #fff;
}
a {
  text-decoration: none;
  color: #fff;
  font-weight: 500;
  font-style: normal;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  text-align: left;
}
.logo_text {
font-weight: 400;
font-style: normal;
font-family: "Rubik Mono One", "Rubik Mono One Placeholder", monospace;
color: #fff;
font-size: 24px;
letter-spacing: 1px;
line-height: 2;
}
.header__burger-btn {
display: none;
position: relative;
width: 40px;
height: 40px;
border: none;
background-color: transparent;
z-index: 2;
}
.header__burger-btn span {
position: absolute;
width: 30px;
height: 3px; 
background-color: white;
left: 5px;
transition: transform .5s, opacity .5s, background-color .5s;
}
.header__burger-btn span:nth-child(1){
transform: translateY(-10px);
}
.header.open .header__burger-btn span:nth-child(1){
transform: translateY(0) rotate(45deg);
}
.header.open .header__burger-btn span:nth-child(2){
opacity: 0;
}
.header.open .header__burger-btn span:nth-child(3){
transform: translateY(0) rotate(-45deg);
}
.header__burger-btn span:nth-child(3){
transform: translateY(10px);
}



h1 {
  width: 100%;
  position: relative;
  font-weight: 400;
  font-style: normal;
  font-family: "Rubik Mono One", "Rubik Mono One Placeholder", monospace;
  font-size: 130px;
  text-transform: uppercase;
  line-height: 1.1;
  text-align: center;
  background: linear-gradient(to right, #9ef01a 0%, #006400 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.name {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  padding: 100px 0px; 
}
.name_content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: nowrap;
  gap: 30px;
}
.studsovet_text {
  width: 100%;
  font-weight: 400;
  font-style: normal;
  font-family: "Nunito", "Nunito Placeholder", sans-serif;
  color: #ffffff;
  font-size: 19px;
  letter-spacing: 0em;
  line-height: 1.4;
  text-align: center;
}

.footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 60px 40px 30px 60px;
  background-color: #10451D;
  flex-wrap: wrap;
}
.horizontal {
  width: 100%;
  height: min-content; /* 131px */
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 40px;
}
.vertical {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 15px;
}
.verticalh {
  font-weight: 600;
  font-style: normal;
  font-family: "Inter", sans-serif;
  color: #ffffff;
  font-size: 16px;
  letter-spacing: 0px;
  line-height: 1.5;
  text-align: left;
}
.verticalrows {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px;
}
.verticalp {
  font-weight: 600;
  font-style: normal;
  font-family: "Inter", sans-serif;
  color: #919191;
  font-size: 16px;
  line-height: 1.5;
  text-align: left;
}
.copyright {
  height: min-content; /* 51px */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 30px 0px 0px 0px;
  overflow: visible;
  flex-wrap: wrap;
}
.copyrightp  {
  font-weight: 600;
  font-style: normal;
  font-family: "Inter", sans-serif;
  color: #919191;
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
}




.swiper {
  width: 500px;
  height: 500px;
}
.swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  font-size: 22px;
  font-weight: bold;
  color: #fff;
}

.swiper-wrapper {
  display: flex;
  width: 380px;
}


.slide1 {background: url(/img/studsovet/1.JPG);}
.slide2 {background: url(/img/studsovet/2.JPG);}
.slide3 {background: url(/img/studsovet/3.JPG);}
.slide4 {background: url(/img/studsovet/4.JPG);}
.slide5 {background: url(/img/studsovet/5.JPG);}
.slide6 {background: url(/img/studsovet/6.JPG);}
.slide7 {background: url(/img/studsovet/7.JPG);}
.slide8 {background: url(/img/studsovet/8.JPG);}
.slide9 {background: url(/img/studsovet/9.JPG);}
.slide10 {background: url(/img/studsovet/10.JPG);}
.slide11 {background: url(/img/studsovet/11.JPG);}
.slide12 {background: url(/img/studsovet/12.JPG);}
.slide13 {background: url(/img/studsovet/13.JPG);}
.slide14 {background: url(/img/studsovet/14.JPG);}
.slide15 {background: url(/img/studsovet/15.JPG);}
.slide16 {background: url(/img/studsovet/16.JPG);}
.slide17 {background: url(/img/studsovet/17.JPG);}
.slide18 {background: url(/img/studsovet/18.JPG);}
.slide19 {background: url(/img/studsovet/19.JPG);}
.slide20 {background: url(/img/studsovet/20.JPG);}

.for-small-screens {
  font-size: 75px;
}

#more {
  margin-top: 50px;
}
#more2 {
  margin-top: 25px;
}





@media screen and (max-width: 1200px) {
  .wrapper {
      max-width: 1140px;
  }
  .for-small-screens {
    display:none;
  }
}
@media screen and (max-width: 992px) {
  .wrapper {
    max-width: 970px;
    height: none;
  }
  .header__burger-btn {
    display: block;
    z-index: 3;
  }
  .nav {
    position: absolute;
    left: -390px;
    top: 0;
    width: 350px;
    background-color: #10451D;
    display: block;
    padding: 75px 20px 20px 20px;
    transition: transform .5s;
    z-index: 2;
    text-align: center;
  }
  a {
    font-size: 24px;
  }
  li {
    padding: 20px;
  }
  .header.open .nav {
    transform: translateX(100%);
  }
  h1 {
    font-size: 100px;
  }
  .for-small-screens {
    display:none;
  }
}
@media screen and (max-width: 767px) {
  .wrapper {
      max-width: 720px;
  }
  h1 {
    font-size: 80px;
  }
  .swiper {
    width: 450px;
    height: 450px;
  }

  .slide1 {background: url(/img/studsovet/FBD/1.png);}
  .slide2 {background: url(/img/studsovet/FBD/2.png);}
  .slide3 {background: url(/img/studsovet/FBD/3.png);}
  .slide4 {background: url(/img/studsovet/FBD/4.png);}
  .slide5 {background: url(/img/studsovet/FBD/5.png);}
  .slide6 {background: url(/img/studsovet/FBD/6.png);}
  .slide7 {background: url(/img/studsovet/FBD/7.png);}
  .slide8 {background: url(/img/studsovet/FBD/8.png);}
  .slide9 {background: url(/img/studsovet/FBD/9.png);}
  .slide10 {background: url(/img/studsovet/FBD/10.png);}
  .slide11 {background: url(/img/studsovet/FBD/11.png);}
  .slide12 {background: url(/img/studsovet/FBD/12.png);}
  .slide13 {background: url(/img/studsovet/FBD/13.png);}
  .slide14 {background: url(/img/studsovet/FBD/14.png);}
  .slide15 {background: url(/img/studsovet/FBD/15.png);}
  .slide16 {background: url(/img/studsovet/FBD/16.png);}
  .slide17 {background: url(/img/studsovet/FBD/17.png);}
  .slide18 {background: url(/img/studsovet/FBD/18.png);}
  .slide19 {background: url(/img/studsovet/FBD/19.png);}
  .slide20 {background: url(/img/studsovet/FBD/20.png);}
  .slide21 {background: url(/img/studsovet/FBD/21.png);}
}

.for-small-screens {
  display:none;
}
@media screen and (max-width: 576px) {
  .wrapper {
    max-width: 540px;
  } 
  h1 {
    font-size: 90px;
    break-inside: auto;
  }
  .studsovet_text {
    font-size: 22px;
  }
  .swiper {
    width: 350px;
    height: 350px;
  }

  .slide1 {background: url(/img/studsovet/FBD350x350/1.png);}
  .slide2 {background: url(/img/studsovet/FBD350x350/2.png);}
  .slide3 {background: url(/img/studsovet/FBD350x350/3.png);}
  .slide4 {background: url(/img/studsovet/FBD350x350/4.png);}
  .slide5 {background: url(/img/studsovet/FBD350x350/5.png);}
  .slide6 {background: url(/img/studsovet/FBD350x350/6.png);}
  .slide7 {background: url(/img/studsovet/FBD350x350/7.png);}
  .slide8 {background: url(/img/studsovet/FBD350x350/8.png);}
  .slide9 {background: url(/img/studsovet/FBD350x350/9.png);}
  .slide10 {background: url(/img/studsovet/FBD350x350/10.png);}
  .slide11 {background: url(/img/studsovet/FBD350x350/11.png);}
  .slide12 {background: url(/img/studsovet/FBD350x350/12.png);}
  .slide13 {background: url(/img/studsovet/FBD350x350/13.png);}
  .slide14 {background: url(/img/studsovet/FBD350x350/14.png);}
  .slide15 {background: url(/img/studsovet/FBD350x350/15.png);}
  .slide16 {background: url(/img/studsovet/FBD350x350/16.png);}
  .slide17 {background: url(/img/studsovet/FBD350x350/17.png);}
  .slide18 {background: url(/img/studsovet/FBD350x350/18.png);}
  .slide19 {background: url(/img/studsovet/FBD350x350/19.png);}
  .slide20 {background: url(/img/studsovet/FBD350x350/20.png);}
  .slide21 {background: url(/img/studsovet/FBD350x350/21.png);}
  
  
  
  .horizontal {
    justify-content: start;
  }

  .for-large-screens {
    display:none;
  }
  .for-small-screens {
    display: block;
  }
}
@media screen and (max-width: 320px) {
  .wrapper {
    max-width: 340px;
  }
  body {
    overflow-x: hidden;
  }
  h1 {
    font-size: 37px;
  }
  .studsovet_text {
    font-size: 12px;
  }
  .swiper {
    width: 200px;
    height: 400px;
  }
  .horizontal {
    justify-content: start;
  }

  .slide1 {background: url(/img/studsovet/FBD200/1.png);}
  .slide2 {background: url(/img/studsovet/FBD200/2.png);}
  .slide3 {background: url(/img/studsovet/FBD200/3.png);}
  .slide4 {background: url(/img/studsovet/FBD200/4.png);}
  .slide5 {background: url(/img/studsovet/FBD200/5.png);}
  .slide6 {background: url(/img/studsovet/FBD200/6.png);}
  .slide7 {background: url(/img/studsovet/FBD200/7.png);}
  .slide8 {background: url(/img/studsovet/FBD200/8.png);}
  .slide9 {background: url(/img/studsovet/FBD200/9.png);}
  .slide10 {background: url(/img/studsovet/FBD200/10.png);}
  .slide11 {background: url(/img/studsovet/FBD200/11.png);}
  .slide12 {background: url(/img/studsovet/FBD200/12.png);}
  .slide13 {background: url(/img/studsovet/FBD200/13.png);}
  .slide14 {background: url(/img/studsovet/FBD200/14.png);}
  .slide15 {background: url(/img/studsovet/FBD200/15.png);}
  .slide16 {background: url(/img/studsovet/FBD200/16.png);}
  .slide17 {background: url(/img/studsovet/FBD200/17.png);}
  .slide18 {background: url(/img/studsovet/FBD200/18.png);}
  .slide19 {background: url(/img/studsovet/FBD200/19.png);}
  .slide20 {background: url(/img/studsovet/FBD200/20.png);}
  .slide21 {background: url(/img/studsovet/FBD200/21.png);}
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Студенческий Совет</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito&family=Poiret+One&family=Rubik+Mono+One&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style_studsovet.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
<script src="main.js"></script>
<!-- Yandex.Metrika counter -->
<script type="text/javascript" >
    (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
    m[i].l=1*new Date();
    for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
    k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
    (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
 
    ym(96117650, "init", {
         clickmap:true,
         trackLinks:true,
         accurateTrackBounce:true,
         webvisor:true
    });
 </script>
 <noscript><div><img src="https://mc.yandex.ru/watch/96117650" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
 <!-- /Yandex.Metrika counter -->
</head>
<body>
    <div class="wrapper">
        <header class="header">
            <button class="header__burger-btn" id="burger">
                <span></span><span></span><span></span>
            </button>
            <p class="logo_text">ФФБД</p>
            <ul class="nav">
                <li class=""><a href="/main.html">Главная</a></li>
                <li class=""><a href="/decanat.html">Деканат</a></li>
                <li class=""><a href="/sdutsovet.html">Студсовет</a></li>
                <!-- <li class=""><a href="/news.html">Новости</a></li> -->
                <!-- <li class=""><a href="/guide.html">Поступающим</a></li> -->
            </ul>
        </header>
        <div class="name">
            <div class="name_content">
                <h1 class="for-large-screens">Студсовет</h1>
                <h1 class="for-small-screens">Студ<br>совет</h1>
                <p class="studsovet_text">
                    Студенческий совет - это краеугольный камень нашего учебного сообщества. Они организуют интересные мероприятия и вечеринки, а также помогают студентам в любых вопросах.</p>
                <p class="studsovet_text">
                    Студенческий совет коммуницирует с деканатом и состоит из энергичных  активных студентов, которым не затруднительно  помочь с любым вопросом обычного студента.</p>
            </div>
        </div>
        <div class="swiper mySwiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide slide1"></div>
            <div class="swiper-slide slide2"></div>
            <div class="swiper-slide slide3"></div>
            <div class="swiper-slide slide4"></div>
            <div class="swiper-slide slide5"></div>
            <div class="swiper-slide slide6"></div>
            <div class="swiper-slide slide7"></div>
            <div class="swiper-slide slide8"></div>
            <div class="swiper-slide slide9"></div>
            <div class="swiper-slide slide10"></div>
            <div class="swiper-slide slide11"></div>
            <div class="swiper-slide slide12"></div>
            <div class="swiper-slide slide13"></div>
            <div class="swiper-slide slide14"></div>
            <div class="swiper-slide slide15"></div>
            <div class="swiper-slide slide16"></div>
            <div class="swiper-slide slide17"></div>
            <div class="swiper-slide slide18"></div>
            <div class="swiper-slide slide19"></div>
            <div class="swiper-slide slide20"></div>
          </div>
        </div>
      
        <!-- Swiper JS -->
        <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
      
        <!-- Initialize Swiper -->
        <script>
          var swiper = new Swiper(".mySwiper", {
            effect: "cards",
            grabCursor: true,
          });
        </script>

        <p class="studsovet_text" id="more">Активное общение и социализация играют важную роль в студенческой жизни. Они позволяют студентам не только установить связи, но и получить новые знания, научиться работать в команде и раскрыть свой потенциал. Быть активным и социальным студентом — это одна из главных радостей и преимуществ студенчества.  
            Студенческие организации, клубы и мероприятия предлагают множество возможностей для саморазвития, общения и реализации творческих потенциалов. Это могут быть научные конференции, спортивные соревнования, культурные мероприятия и многое другое. </p>
        <p class="studsovet_text" id="more2">А чтобы систематизировать всю студенческую деятельность, на каждом факультете есть свой студенческий совет. </p>
        <p class="studsovet_text" id="more2">Студенческий совет (студсовет) – орган студенческого самоуправления, одна из форм проявления студенческой общественной деятельности, направленной на решение актуальных для студентов вопросов.</p>    
        <p class="studsovet_text" id="more2">А главная задача такого органа – сделать так, чтобы жизнь студента на факультете была яркой, легкой и интересной! 
            В него входят различные секторы, отвечающие за научную, спортивную, культурную, информационную и общественную деятельность. </p>
        <p class="studsovet_text" id="more2">Помимо председателя и культорга студсовета, во главе каждого сектора стоит человек, отвечающий за качественное исполнение своих обязанностей.</p>
        <div class="footer">
            <div class="horizontal">
                <div class="vertical">
                    <p class="verticalh">БГЭУ</p>
                    <div class="verticalrows">
                        <p class="verticalp">Министерство образования</p>
                        <p class="verticalp">Министерство финансов</p>
                        <p class="verticalp">Национальный банк</p>
                    </div>
                </div>
                <div class="vertical">
                    <p class="verticalh">Наши соцсети</p>
                    <div class="verticalrows">
                        <p class="verticalp">Инстаграм</p>
                        <p class="verticalp">Телеграм</p>
                        <p class="verticalp">Вконтакте</p>
                    </div>
                </div>
                <div class="vertical">
                    <p class="verticalh">Связь с нами</p>
                    <div class="verticalrows">
                        <p class="verticalp">Деканат</p>
                        <p class="verticalp">Студсовет</p>
                        <p class="verticalp">Ректорат</p>
                    </div>
                </div>
            </div>
            <div class="copyright">
                <p class="copyrightp">© 2023 БГЭУ, ФФБД</p>
                <p class="copyrightp">Разработка и дизайн: Лапко Вадим</p>
                <p class="copyrightp" bl><a href="https://forms.gle/YMmC2u3WnapKhZub7" class="copyrightp">Сообщить об ошибке / Предложить улучшения</a></p>
            </div>
        </div>
    </div>
</body>
</html>

https://codepen.io/wqlumuvy-the-builder/pen/WNmopmR


Ответы (0 шт):