Javascript Swiper 高度自动调整大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25946896/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Swiper height auto resize
提问by ryush00
I have added swiper code in [REMOVED].
我在 [REMOVED] 中添加了 swiper 代码。
my code like here
我的代码就像这里
<div class="swiper-container">
<div class="swiper-wrapper">
<!--First Slide-->
<div class="swiper-slide" id="swiper-slide">
<div class="content-slide">
content1
</div>
</div>
</div>
<!--Second Slide-->
<div class="swiper-slide" id="swiper-slide">
<div class="content-slide">
content1
</div>
</div>
</div>
</div>
</div>
They have blank space.
他们有空白。
I want to remove this space.
我想删除这个空间。
回答by Erfan
Update:
更新：
As passatgt mentioned in the comments for newer versions calculateHeightis replaced with autoHeight, hereyou can find an example:
正如新版本评论中提到的 passatgtcalculateHeight被替换为autoHeight，在这里您可以找到一个示例：
var swiper = new Swiper('.swiper-container', {
autoHeight: true, //enable auto height
spaceBetween: 20,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
Add calculateHeight:trueto swiper definition.
添加calculateHeight:true到 swiper 定义。
var tabsSwiper = new Swiper('.swiper-container',{
speed:300,
calculateHeight:true,
onSlideChangeStart: function(){
$(".tabs li").removeClass('active')
$(".tabs li").eq(tabsSwiper.activeIndex).addClass('active')
}
})
