Swiper js не изменяет автоматически размер swiper-container и swiper-slide class

У меня есть swiper, который содержит карты mdbootstrap, которые динамически создаются и добавляются в карусель swiper. Вместо свайпера для настройки высоты карты классы свайпера по умолчанию устанавливают максимальную высоту раздела, которая составляет 1333 пикселей. Карты в среднем имеют размер около 400 пикселей. Что еще более расстраивает, так это то, что у меня есть 3 других карусели swiper в отдельном файле, которые отлично работают. Я попытался использовать параметр autoHeight и установить для него значение true, но это не сработало. Я просто отрезаю половину карт

Вот код рабочего экземпляра

<section class="swiper-section ">
     <div class="netflix">
         <!-- Slider main container -->
         <div class="container">
             <h3 class="header-container"><span>Trending Movies</span></h3>
             <div class="swiper-container">
                  <!-- Additional required wrapper -->
                  <div class="swiper-wrapper trending_movies">

                         <!-- dynamic cards go here -->
                         <div class="swiper-slide">
                            <div class="card">
                                <div class="icon-button">
                                    <ion-icon name="ellipsis-horizontal-circle-sharp" class="ion-icon" data-movie="${el.title}"></ion-icon>
                                </div>
                                <a href="${'/client/views/movies.html'}" data-src="${el.id}" >
                                    <img class="img-size" src="${poster_image}" alt="">
                                </a>
                                <div class="card-body">
                                    <h6 class="card-title"> ${el.title}</h6>
                                    <p>${el.release_date}</p>
                                </div>
                            </div>
                        </div>
                   </div>
                       
                   <div class="swiper-button-prev"></div>
                   <div class="swiper-button-next"></div>

              </div>
         </div>

 </section>

<script>
        var mySwiper = new Swiper('.swiper-container', {
            slidesPerView: 6,
            spaceBetween: 15,
            // Optional parameters
            direction: 'horizontal',
            loop: true,
            observer: true,
            observerParents: true,

           
            // Navigation arrows
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },

            // And if we need scrollbar

        })

    </script>

Вот код экземпляра, который не работает

<section class="swiper-section">
            <div class="netflix">
                <div class="container">
                    <h3 class="header-container"><span>Cast</span></h3>
                    <div class="swiper-container">
                        <div class="swiper-wrapper cast_carousel">

                          <!-- dynamic cards go here -->
                          <div class="swiper-slide">
                        <div class="card">
                            <a href="${'/client/views/movies.html'}" data-src="${el.id}">
                                <img class="img-size" src="${picture}" alt="">
                            </a>
                            <div class="card-body">
                                <h6 class="card-title"> ${el.character}</h6>
                                <p>${el.name}</p>
                            </div>
                        </div>
                    </div>
                        </div>
                        <!-- Add Arrows -->
                        <div class="swiper-button-next"></div>
                        <div class="swiper-button-prev"></div>
                    </div>
                </div>
            </div>
        </section>
        <section>

 <script>
        var mySwiper = new Swiper('.swiper-container', {
            slidesPerView: 6,
            spaceBetween: 15,
            // Optional parameters
            direction: 'horizontal',
            loop: true,
            observer: true,
            observerParents: true,
            autoHeight: true,

            // Navigation arrows
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },

        })

    </script>

Вот как выглядит рабочая версия.

Вот то, что я получаю, но не желаемый результат

И вот что я получаю, когда использую autoHeight: true

Я искренне сожалею об использовании swiperjs. Это слишком непредсказуемо. В основном просто терплю это сейчас, потому что я довольно глубоко в проекте. Есть ли другие фреймворки карусели, похожие на Swiper, с которыми проще работать?