Swiper js 不会自动调整 swiper-container 和 swiper-slide 的大小 class

Question

我有一个刷卡器，其中包含动态创建并添加到刷卡器转盘的 mdbootstrap 卡片。刷卡器类默认为该部分的最大高度，即 1333 像素，而不是调整卡片高度的刷卡器。这些卡片平均约为 400 像素。更令人沮丧的是，我在一个单独的文件上有 3 个其他的刷卡轮播，工作得很好。我尝试使用 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>

Here is what the working version looks like.

Here is what i'm getting which is not my desired outcome

And here is what I get when I use autoHeight: true

老实说，我很后悔使用 swiperjs。太变幻莫测了。现在基本上只是容忍它，因为我对这个项目很深入。有没有其他类似于swiper的轮播框架更容易使用？

Answer 1

这听起来很疯狂，经过几个小时的努力，我终于弄明白了。我回去检查我的 html 文件并注意到在开始时我丢失了标签。我将其添加进去并解决了问题。

Swiper js 不会自动调整 swiper-container 和 swiper-slide 的大小 class

Swiper js not automatically resizing the swiper-container and swiper-slide class

css

dynamic

mdbootstrap

swiperjs