Карусель с циклом записей wordpress

Пишу тему для wordpress. С админки можно создавать, удалять и редактировать записи. Вывожу на сайт я их циклом. У каждой записи свое модальное окно открывается. Мне необходимо сделать карусель записей. Чтобы отображалось 3 поста разом, но листалась карусель лишь по одному посту. Пока так:

Далее html

<div id="test" class="block-wrapper block-41-2-2-text-blocks-slider-on-color-bg-without-btn">
            <section class="g-bg" style="--bg: #cd4747;">
            <din class="container mySwiper">
                    
                    <div class="cards swiper-wrapper">              
                        <!-- <div class=""> -->
                            <?php
                            global $post;
            
                            $myposts = get_posts([ 
                                'numberposts' => -1,
                                'offset'      => 1,
                                'category'    => 2,
                            ]);
                        
                            if( $myposts ){
                                foreach( $myposts as $post ){
                                
                                    setup_postdata( $post );
                                    ?>
                                    <div class="card swiper-slide col-6 col-md-2">
                                        <!-- Верхняя часть -->
                                        <div class="card__top">
                                        <!-- Изображение товара -->
                                            <a class="card__image">
                                                <img src="<?php bloginfo('template_url'); ?>/assets/images/iconM.png" alt=""/>
                                            </a>
                                        </div>
                                        <!-- Нижняя часть -->
                                        <div class="card__bottom">
                                        <!-- название товара -->
                                            <a class="card__title"><?php the_title();?></a>
                                            <button type="button" class="card__add" data-bs-toggle="modal" data-bs-target="#myModal-<?php echo get_the_ID();?>">Подробнее</button>
                                        </div>
                                        <!-- Модальное окно -->
                                        <div class="modal" id="myModal-<?php echo get_the_ID();?>" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                            <div class="modal-dialog modal-lg">
                                                <div class="modal-content">
                                                    <div class="modal-header" style="background-color:#cc4646;">
                                                        <h5 class="modal-title" id="exampleModalLabel" style="color: #fff;">Вакансия</h5>
                                                        <button type="button" class="btn-close btn btn-light" data-bs-dismiss="modal" aria-label="Закрыть"></button>
                                                    </div>
                                                    <div class="modal-body" style="margin: 1em;">
                                                        <div class="job_title" style="text-align: center; padding-bottom: 2.5em; padding-top: 1em;">
                                                            <h4><?php echo get_the_title();?></h4>
                                                        </div>
                                                        <div class="charge" style="padding-bottom: 1em;">
                                                        <?php echo get_the_content();?>
                                                        </div>
                                                    </div>
                                                    <div class="modal-footer" style="background-color: #fff;">
                                                        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Закрыть</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        
                                    </div> 
                                    
                                    <?php 
                                }
                            } else {
                                ?>
                                <h3>Записей нет</h3>
                                <?php
                            }
                        
                            wp_reset_postdata(); // Сбрасываем $post
                            ?>  
                        <!-- </div> -->
                    </div>
                    <div class="swiper-pagination"></div>

                    <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div>      
            </din>

            </section>
        </div>

script

var swiper = new Swiper(".mySwiper", {
      spaceBetween: 30,
      slidesPerView: 3, // this
      slidesPerColumn: 1, // and this
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
      pagination: {
        el: ".swiper-pagination",
      },
      mousewheel: true,
      keyboard: true,
    });

На этом коде посты выводятся, курсором пролистываются, но стрелки не работают. И выводится количество постов, которые определены в цикле(по группе), выводятся все. Подскажите, в чем моя ошибка?