Swiper中文论坛

标题: 急！！swiper做选项卡切换，内容高度不一样，如何自适应。 [打印本页]

作者: Damon 时间: 2015-6-6 11:47
标题: 急！！swiper做选项卡切换，内容高度不一样，如何自适应。
//选项卡
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容器会有很大的空白，求大神指教。

作者: chen1110103 时间: 2015-6-7 22:56
像这种吗
http://swiper2.swiper.com.cn/demo/demo-apps/simple/index.html

作者: linzhigao01 时间: 2015-6-9 17:49
只能使用一个块的嵌套你的内容，做超出滚动设置

作者: xx1314o 时间: 2015-7-7 16:12
很简单啊，用API onSlideChageStart

作者: 郑家好人 时间: 2015-7-9 14:45
这个问题我之前也遇到，一直不知道怎么解决，力顶楼主！！！

作者: 郑家好人 时间: 2015-7-9 14:52

xx1314o 发表于 2015-7-7 16:12
很简单啊，用API onSlideChageStart

这个好像可以！

作者: 树根 时间: 2015-7-15 11:44
这个怎么设置，我设置了不可以

作者: 疯子蚁 时间: 2015-9-24 17:52
http://bbs.swiper.com.cn/forum.php?mod=viewthread&tid=487 我这个不成熟可以看看

作者: 小羊羊羊 时间: 2015-10-8 01:51
我也是遇到这个问题，要怎么让第二个从开始位置显示

作者: 小羊羊羊 时间: 2015-10-8 01:54

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

请问这种是怎么实现的？小弟码农一个，请赐教

作者: 小羊羊羊 时间: 2015-10-8 17:32

郑家好人发表于 2015-7-9 14:52
这个好像可以！

请问怎么使用？

作者: dengriqian 时间: 2016-1-6 13:06
这个简单啊，swiper-slide{height:10px} swiper-slide-active { height:auto}

作者: 那谁家的丫头 时间: 2016-2-25 16:52
楼主最后解决了吗，怎么解决的？

作者: 那谁家的丫头 时间: 2016-2-26 11:33

郑家好人发表于 2015-7-9 14:52
这个好像可以！

怎么用？

作者: duanzhenyi 时间: 2016-4-7 15:15

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

那slide中要是有需要显示隐藏的元素呢？slide的高度不能重新计算导致slide不能滑动

作者: computer1024 时间: 2016-5-20 18:32
把两个observer设置成true试试
observer:true,
observeParents:true

作者: okdywcom 时间: 2016-9-23 10:09

var h = $(".swiper-slide-active").children().height() * $(".swiper-slide-active").children().length;
$(".swiper-wrapper").css("height",h);

复制代码

作者: djdliu 时间: 2016-10-18 15:47

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

这个可以

作者: 通杀 时间: 2016-10-31 14:16
分页器怎么变成文字呢？

作者: isKimmie 时间: 2016-12-16 19:35
每一个slider有了一个height,怎么去掉啊
<ul class="swiper-wrapper">
<li class="classify-active-l c-li-side">
市场攻略
</li>
<li class="swiper-slide">
销售攻略
</li>
<li class="swiper-slide">
运营攻略
</li>
<li class="swiper-slide">
开店攻略
</li>
<li class="swiper-slide">
品牌攻略
</li>
<li class="swiper-slide">
顶层设计
</li>
</ul>

作者: zero_llj 时间: 2017-2-20 10:56
你好我想请问下http://swiper2.swiper.com.cn/demo/demo-apps/simple/index.html这个是要自己下还是就是用的swiper的插件 js不用自己再自定义

作者: 975839115 时间: 2017-3-10 09:40

小羊羊羊发表于 2015-10-8 01:51
我也是遇到这个问题，要怎么让第二个从开始位置显示

我也遇到和你一样的问题，你解决了吗？

作者: 烤鸡不用烤 时间: 2017-7-12 16:00

975839115 发表于 2017-3-10 09:40
我也遇到和你一样的问题，你解决了吗？

我也是一样的问题，你解决了吗？

作者: 小妮_yu 时间: 2017-9-4 14:11
我也遇到了这个问题，你解决了么

作者: ctin2009 时间: 2018-1-31 17:25

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

老铁双击666

作者: brain 时间: 2018-5-30 10:05

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

swiper双向控制

作者: 天明 时间: 2018-7-22 10:04

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

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

作者: 天明 时间: 2018-8-21 22:53
$(".swiper-slide").html(""); //清空所有滑块里面的html

作者: HELLO__ 时间: 2019-7-16 12:00
autoHeight: true, //高度随内容变化

作者: 武状元常威 时间: 2019-8-16 10:38
autoHeight: true,

作者: 842797052 时间: 2020-5-13 15:06

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

请问怎么做的

作者: asdewq 时间: 2020-8-26 11:59
好用。多谢

作者: 1282546003 时间: 2021-7-14 09:43

:o:o

欢迎光临 Swiper中文论坛 (http://bbs.swiper.com.cn/)