Rows is stacking all slides

[DHRegular]

Hello!

I am trying to integrate swiper into a WordPress theme I am creating. I am trying to create a swiper that looks a lot like one of the demos: https://codesandbox.io/s/x3ty9k?file=/index.html:912-955

I want three cols and two rows, which looked super simple. However, when I add the code:
var swiper = new Swiper(".mySwiper", {
//slidesPerView: 3,
grid: {
rows: 2
},
spaceBetween: 30,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});

All of the slides stack in one column (making a total of 12 rows, and would be more if I make more slides). The kicker is that pagination and navigation still work, and I'm able to press next to an empty page.

My HTML:
<div class="swiper mySwiper">
<div class="conference-speakers-cards-container container swiper-wrapper" data-chunksize="6">
<?php

if ( !function_exists('wpeventin')) {
echo 'Please Install and Activate the WP Event Solution plugin in order to use the Speakers Section';
} else {
wp_reset_query();
$speaker_array = [];
$args = [
'post_type' => 'etn-speaker',
'posts_per_page' => -1
];

$the_query = new WP_Query($args);
if ($the_query->have_posts()) {
while($the_query->have_posts()) {
$the_query->the_post();
$speaker_avatar = apply_filters("etn/speakers/avatar", \Wpeventin::assets_url() . "images/avatar.jpg");
$post_meta = get_post_meta(get_the_ID());
$speaker_data = [
'speaker_name' => apply_filters('etn_speaker_title', get_the_title()),
'speaker_designation' => $post_meta["etn_speaker_designation"][0],
'speaker_thumbnail' => has_post_thumbnail() ? get_the_post_thumbnail_url() : $speaker_avatar,
'speaker_permalink' => get_the_permalink()
];

array_push($speaker_array, $speaker_data);
}
}

//<!-- SPEAKER CARD TEMPLATE -->
foreach($speaker_array as $speaker) { ;?>

<div class="swiper-slide">
<a href="<?php echo $speaker['speaker_permalink']; ?>">
<div class="conference-speaker-card-wrapper ">
<div class="speaker-card-avatar-wrapper">
<img src="<?php echo esc_url( $speaker['speaker_thumbnail'] ); ?>" alt="Picture of <?php echo $speaker['speaker_name']; ?>"/>
</div>

<div class="speaker-card-info-wrapper">
<div class="speaker-card-title"><?php echo $speaker['speaker_name']; ?></div>
<div class="speaker-card-designation"><?php echo $speaker['speaker_designation']; ?></div>
</div>
</div>
</a>
</div>

<?php
} ?>
<?php
}
wp_reset_query();
?>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>

<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>

I have also combed through all of my CSS and gotten rid of anything that might possibly mess with the formatting. But again, this happens when I add a row value.

Has anyone encountered this before? And how can I fix it?

[kaboume]

Hi,
I have the same issue.
did you find the solution?
Thanks.