Горизонтальная прокрутка сайта из-за 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