0

我有一个刷卡器，其中包含动态创建并添加到刷卡器轮播的 mdbootstrap 卡。swiper 类默认为该部分的最大高度，即 1333px，而不是 swiper 来调整卡片高度。这些卡片的平均大小约为 400 像素。更令人沮丧的是，我在一个单独的文件上还有 3 个其他 swiper carousels 运行良好。我尝试使用 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 的更易于使用的轮播框架？

4

1 回答 1

0

因此，这听起来很疯狂，经过数小时试图弄清楚这一点，我终于弄明白了。我回去检查了我的 html 文件，发现一开始我缺少 <!Doctype html> 标签。我添加了它并解决了问题。

于 2020-06-28T17:59:38.567 回答