Swiper js不会自动调整swiper-container和swiper-slide类大小
Swiper js不会自动调整swiper-container和swiper-slide类大小
提问于 2020-06-28 15:00:07
我有一个swiper，它包含动态创建并添加到swiper carousel的mdbootstrap卡。swiper类默认为部分的最大高度为1333px，而不是swiper来调整卡的高度。这些卡的平均大小约为400px。更令人沮丧的是，我在一个单独的文件上有另外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的更容易使用的旋转木马框架？
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-06-29 01:59:39
所以，尽管这听起来很疯狂，但经过几个小时的努力，我终于弄明白了。我回过头来检查我的html文件，发现一开始我遗漏了标签。我把它加进去，问题就解决了。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62619270
复制相关文章
相似问题
腾讯云开发者
