急！！swiper做选项卡切换，内容高度不一样，如何自适应。

Damon · 发表于 2015-6-6 11:47:54

//选项卡
var tabSwiper = new Swiper('.tabSwiper', {
pagination: '.tab-pagination',
paginationClickable: true,
//calculateHeight: true,
paginationBulletRender: function (index, className) {
switch (index) {
   case 0: name='选项卡1';break;
   case 1: name='选项卡2';break;
   case 2: name='选项卡3';break;
   default: name='';
}
   return '<span class="' + className + '">' + name + '</span>';
},
});
用swiper做了个移动端的选项卡，但是每个选项里的内容高度不一样，而swiper-wrapper是显示的最大高度，所以有些swiper-slide容器会有很大的空白，求大神指教。

dengriqian · 发表于 2016-1-6 13:06:41

这个简单啊，swiper-slide{height:10px} swiper-slide-active { height:auto}

郑家好人 · 发表于 2015-7-9 14:45:10

这个问题我之前也遇到，一直不知道怎么解决，力顶楼主！！！

xx1314o · 发表于 2015-7-7 16:12:58

很简单啊，用API onSlideChageStart

1282546003 · 发表于 2021-7-14 09:43:32

:o:o

asdewq · 发表于 2020-8-26 11:59:08

好用。多谢

842797052 · 发表于 2020-5-13 15:06:04

chen1110103 发表于 2015-6-7 22:56
像这种吗
http://swiper2.swiper.com.cn/demo/demo-apps/simple/index.html

请问怎么做的

武状元常威 · 发表于 2019-8-16 10:38:46

autoHeight: true,

HELLO__ · 发表于 2019-7-16 12:00:58

autoHeight: true, //高度随内容变化

天明 · 发表于 2018-8-21 22:53:56

$(".swiper-slide").html(""); //清空所有滑块里面的html

天明 · 发表于 2018-7-22 10:04:19

chen1110103 发表于 2015-6-7 22:56
像这种吗
http://swiper2.swiper.com.cn/demo/demo-apps/simple/index.html

就是需要这种效果了，代码可以分享看看吗

brain · 发表于 2018-5-30 10:05:41

小羊羊羊发表于 2015-10-8 01:54
请问这种是怎么实现的？小弟码农一个，请赐教

swiper双向控制

ctin2009 · 发表于 2018-1-31 17:25:33

dengriqian 发表于 2016-1-6 13:06
这个简单啊，swiper-slide{height:10px} swiper-slide-active { height:auto}

老铁双击666

急！！swiper做选项卡切换，内容高度不一样，如何自适应。

点评

点评

点评