swiper 使用

最新推荐文章于 2024-09-08 15:56:34 发布

鱼与雨于语

最新推荐文章于 2024-09-08 15:56:34 发布

阅读量494

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/sinat_38914900/article/details/117296088

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

本文详细介绍了如何在Swiper滑动组件中处理元素隐藏状态下不执行初始化的问题，以及如何通过autoHeight实现高度自适应，包括解决实际应用中无效的情况。还分享了设置swiper-container和swiper-slide高度的技巧以及相关事件监听的代码示例。

摘要由CSDN通过智能技术生成

一、使用

1、多个相同class名引用

$('.a').each(function(){

    var swiper = new Swiper(this, {

        autoplay : true,

        loop: true,

        initialSlide: 0,

        observer: true,

        observeParents: true

    });

});

二、遇到的坑

1、在元素 display: none 时，不执行

设定参数（最低支持swiper版本 3.0.0 ）

observer:true,//修改swiper自己或子元素时，自动初始化swiper

observeParents:true//修改swiper的父元素时，自动初始化swiper

2、swiper-container高度根据当前显示内容增高

autoHeight: true （最低支持swiper版本 3.2.5 ）

calculateHeight : true （支持swipe2）

但是实际应用时，无效。解决方式：

设置 swiper-container ， swiper-slide 高度均为auto ;但是 swiper-slide 需加 !important

.swiper-container { height: auto; }
.swiper-container .swiper-slide { height: auto !important; }

然后在调用时根据当前显示的swiper-slide的实际高度动态给swiper-container的高度赋值

var mySwiper = new Swiper('.swiper-container',{
    calculateHeight: true,
    onInit: function(swiper){
        heightChange(swiper.activeIndex);
    },
    onSlideChangeEnd: function(swiper){
        heightChange(swiper.activeIndex);
    }
})

function heightChange(i){            
    var h = $('.swiper-slide').eq(i).outerHeight();
    $('.swiper-container').height(h);
}