Swiper.JS Rows: 2 складывает все, что приводит к бесконечным строкам ⇐ CSS

[Anonymous]

Я пытаюсь интегрировать SwiperJS в тему WordPress, которую создаю. Я пытаюсь создать слайдер с двумя строками, и по сути он похож на их демонстрацию: https://codesandbox.io/s/x3ty9k?file=/i ... ml:912-955
Но когда я следую демонстрации, у меня остается каждый слайд, наложенный друг на друга, что, очевидно, составляет более 2 строк (всего 12 строк на данный момент и может увеличиться, если я добавлю больше слайдов). Самое странное в этом то, что ползунок регистрирует, что ДОЛЖНО быть больше «страниц», а кнопки влево/вправо и нумерация страниц по-прежнему работают (но нажатие «Далее» просто приводит вас к пустой странице слайдера).Проблема:

Строки складываются при следовании документации по SwiperJS.
Что я делаю Пробовал:

• Просмотрел CSS, чтобы изменить любые гибкие отображения, избавился от всего, что могло повлиять на макет слайдера.
• попробовал использовать https://codepen.io/andreacazzola90/pen/ZEBBXqm для другого метода получения нескольких строк с помощью SwiperJS
• Изменил HTML, чтобы попробовать слайдер с больше и меньше оберток.

JavaScript:

Код: Выделить всё

    var swiper = new Swiper(".mySwiper", {
slidesPerView: 3,
grid: {
rows: 2
},
spaceBetween: 30,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});

HTML:

Код: Выделить всё

[url=



[/url]

SCSS:

Код: Выделить всё

.conference-speakers-container {
//display: flex;
//flex-direction: column;
//min-height: 100vh;
width: 100vw;
position: relative;

.conference-speaker-slider-left-arrow {
position: absolute;
height: 50px;
width: 50px;
font-size: 35px;
top: 50%;
left: 50px;
transform: translate(-50%, 50%);
color: #909090;
border: 2px solid #909090;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
z-index: 1010;
padding-top: 5px;

@include mobile {
left: 15px;
height: 35px;
width: 35px;
font-size: 28px;
}
}

.conference-speaker-slider-right-arrow {
position: absolute;
height: 50px;
width: 50px;
font-size: 35px;
top: 50%;
right: 50px;
transform: translate(50%, 50%);
color: #909090;
border: 2px solid #909090;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
z-index: 1010;
padding-top: 5px;

.conference-speaker-slider-right-arrow:hover {
color: $hover-color;
}

@include mobile {
right: 15px;
height: 35px;
width: 35px;
font-size: 28px;
}
}

.conference-speakers-title-container {
display: flex;
justify-content: center;
align-items: center;
background-color: white;
height: 125px;

.title-word-blue {
color: $main-color;
font-size: 2rem;
}

.title-word-black {
color: black;
font-size: 2rem;
margin-left: 15px;
}
}

.conference-speakers {
//height: calc(100vh - 125px);
width: 100%;
background-color: white;
//display: flex;
//justify-content: center;
//align-items: center;
position: relative;
}

.mySwiper {
width: 100%;
height: 100%;
margin: auto;

.conference-speakers-cards-container {
//swiper-wrapper
//display: flex;
//justify-content: center;
//gap: 1em;
//flex-wrap: wrap;
padding-bottom: 125px;
padding-top: 50px;
//overflow: hidden;
//min-width: calc(100% - 120px);
margin: auto;

.swiper-slide {
//margin: auto;
//min-width: 100%;
//display: flex;
//justify-content: center;
//align-items: center;
max-width: 344px;
height: calc((100% - 30px) / 2) !important;

a {
//display: inline-block;
.conference-speaker-card-wrapper {
box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
max-width: 344px;
&:hover {
transform: scale(1.02);
transition: .25s;
.speaker-card-info-wrapper {
.speaker-card-title {
color: #0073AE;
text-decoration: underline;
transition:  .25s;
}
}
}
.speaker-card-avatar-wrapper {
height: 344px;
img {
height: 344px;
width: 100%;
object-fit: cover;
object-position: center;
}
}

.speaker-card-info-wrapper {
background-color: white;
color: #2C344A;
padding: 10px;
text-align: center;

.speaker-card-title {
font-size: 21px;
font-weight: bold;
margin-bottom: -5px;
}
.speaker-card-designation {
font-size: 15px;
}
}
}
}
}
}
}
}

И да, многое закомментировано, и это потому, что я пытаюсь во всем разобраться, ха-ха

Подробнее здесь: https://stackoverflow.com/questions/728 ... inite-rows