swiper插件遇到的坑

1.网速卡的情况下轮播图会出现塌陷

解决方法：

在swiper外层固定高度，用填充百分比方法：

html代码：在swiper-container加一层外层，外层用padding-top:50%(看图片大小而定)

<div class="swiper_wrap">
    <div class="swiper-container">
        <div class="swiper-wrapper">...</div>
    </div>
</div>

样式：

<style type="text/css">
	.swiper_wrap{position: relative; padding-top:42%; overflow: hidden;}
	.swiper_wrap .swiper-container{ position: absolute; left: 0;top: 0;width: 100%;height: 100%; }
</style>

2.jquery隐藏显示 Swiper滚动失效？

百度了一下，swiper要初始化

 

var mySwiper = new Swiper('.swiper-container', {
      observer:true,//启动动态检查器,当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper                  
 
})

 

1.在swiper显示隐藏后，swiper点不了或者滑动出现问题，需要自动初始化

 var swiper = new Swiper('.swiper-container', {
                    slidesPerView: 1,
                    paginationClickable: true,
                    observer: true, //修改swiper自己或子元素时，自动初始化swiper，主要是这两行
                    observeParents: true //修改swiper的父元素时，自动初始化swiper
                });

3.swiper在loop模式，当轮播到最后一张图时候，做其他事件，原链接：https://www.cnblogs.com/moguzi12345/p/11060172.html

var swiper = new Swiper('.swiper-container', {
            loop: true, //禁止手动滑动
            direction: 'vertical',
            slidesPerView: 1,
            spaceBetween: 30,
            speed: 500,
            mousewheel: true,
            autoplay: {
                disableOnInteraction: false, //手动滑动之后不打断播放
                delay: 1000
            },
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },　　　　　　　//打印suwper当前图片的索引值
            on: {
                slideChangeTransitionEnd() { 
                    this.active = $('.swiper-slide-active').attr('data-swiper-slide-index')
                    var sum = this.realIndex + 1
                    console.log(sum)
                }
            }
        });