Swiper中文论坛

标题: swiper-container搞定自适应 [打印本页]

---

作者: callmesoul    时间: 2015-9-13 14:47
标题: swiper-container搞定自适应
我是想弄成swiperde 高度根据silder的高度自适应。

也看了这里的教程：http://www.swiper.com.cn/api/method/2015/0308/241.html
用了源码

1.             onInit: function(swiper){
   
2.                 swiper.container[0].style.height=swiper.slides[swiper.activeIndex].offsetHeight+'px';
   
3.             },
   
4.             onSlideChangeEnd: function(swiper){
   
5.                 swiper.container[0].style.height=swiper.slides[swiper.activeIndex].offsetHeight+'px';
   
6.             },

复制代码

但是切换后高度不变啊。求教！谢谢

---

作者: ThinkDifferent    时间: 2015-9-15 11:18
.swiper-container  {height：100%}

---

作者: 疯子蚁    时间: 2015-9-19 15:46
onSlideChangeEnd  不能触发....  怎么没人回答呢?帮帮我们这些菜鸟啊

---

作者: 疯子蚁    时间: 2015-9-19 17:03

疯子蚁 发表于 2015-9-19 15:46
onSlideChangeEnd  不能触发....  怎么没人回答呢?帮帮我们这些菜鸟啊

http://www.swiper.com.cn/api/touch/2015/0308/205.html  看我直播  现在算出的高度竟然一样的 继续

---

作者: 疯子蚁    时间: 2015-9-21 10:39

1. var eHeight0,eHeight1,eHeight2;
   
2.                         var mySwiper = new Swiper('.swiper-container', {
   
3.                                 resistanceRatio : 1,
   
4.                                 onInit: function(swiper){
   
5.                                         eHeight0 = swiper.slides[0].offsetHeight+'px';
   
6.                                         eHeight1 = swiper.slides[1].offsetHeight+'px';
   
7.                                         eHeight2 = swiper.slides[2].offsetHeight+'px';
   
8.                                         alert(eHeight2)
   
9.                                         switch(swiper.activeIndex)
   
10.                                         {
    
11.                                                 case 0:
    
12.                                                 swiper.container[0].style.height=eHeight0;
    
13.                                                 break;
    
14.                                                 case 1:
    
15.                                                 swiper.container[0].style.height=eHeight1;
    
16.                                                 break;
    
17.                                                 case 2:
    
18.                                                 swiper.container[0].style.height=eHeight2;
    
19.                                                 break;
    
20.                                         }
    
21. //                swiper.container[0].style.height=swiper.slides[swiper.activeIndex].offsetHeight+'px';
    
22.             },onSlideChangeStart: function(swiper){
    
23.                             //var eHeight0 = swiper.slides[0].offsetHeight+'px';
    
24.                                         //var eHeight1 = swiper.slides[1].offsetHeight+'px';
    
25.                                         //var eHeight2 = swiper.slides[2].offsetHeight+'px';
    
26.                                         switch(swiper.activeIndex)
    
27.                                         {
    
28.                                                 case 0:
    
29.                                                 swiper.container[0].style.height=eHeight0;
    
30.                                                 alert('0');
    
31.                                                 break;
    
32.                                                 case 1:
    
33.                                                 swiper.container[0].style.height=eHeight1;
    
34.                                                 alert('1')
    
35.                                                 break;
    
36.                                                 case 2:
    
37.                                                 swiper.container[0].style.height=eHeight2;
    
38.                                                 alert('2')
    
39.                                                 break;
    
40.                                         }
    
41. //                swiper.container[0].style.height=swiper.slides[swiper.activeIndex].offsetHeight+'px';
    
42. //                alert(swiper.activeIndex);
    
43. //              alert(swiper.slides[swiper.activeIndex].offsetHeight+'px');
    
44.                 //alert(swiper.slides[swiper.activeIndex].offsetHeight+'px');
    
45.             },
    
46.                                 direction: 'horizontal',
    
47.                                 loop: false,
    
48.                                 calculateHeight: true,
    
49.                                 effect: 'coverflow',
    
50.                                 useCSS3Transforms:'false',
    
51.                                 // 如果需要分页器
    
52.                                 pagination: '.swiper-pagination',
    
53.                                 // 如果需要前进后退按钮
    
54.                                 // nextButton: '.swiper-button-next',
    
55.                                 // prevButton: '.swiper-button-prev',
    
56.                                 // 如果需要滚动条
    
57.                                 //                                 scrollbar: '.swiper-scrollbar',
    
58.                         })

复制代码

先将就吧  等大神来

---

作者: 疯子蚁    时间: 2015-9-24 10:35

疯子蚁 发表于 2015-9-21 10:39
先将就吧  等大神来

我又来了   这么写火狐都不认识.

---

作者: admin    时间: 2015-9-28 17:09
<div class="swiper-wrapper" style="float:left; height:auto;">

---

作者: 阳光不锈    时间: 2015-12-11 13:18


经验证，没必要给swiper-wrapper额外添加样式，只需要在onInit的函数中设置每个swiper-slide的高度，然后在设置API接口中autoHeight:true即可.
onInit: function(swiper){
                    var arr=[];
                    $(".swiper-slide").map(function(i){
                        var len=$(this).find(".grid-packery").length;
                        arr.push(len);
                        $(this).css("height",gridHeight*parseInt(arr)+'px');
                    });
                },因为我的每个slide中放的是n个大小一样的div所以就按gridHeight*parseInt(arr)这样计算了

---

作者: Swpery    时间: 2015-12-11 16:53
看看不知道会不会给分~

---

作者: HELLO__    时间: 2016-10-15 16:22
加一个这个就可以了。autoHeight: true,

---

作者: zxsss    时间: 2017-4-11 11:37

HELLO__ 发表于 2016-10-15 16:22
加一个这个就可以了。autoHeight: true,

亲 我发现 只有第一次是不行的 后面都没问题 怎么办

---

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

Powered by Discuz! X3.2