或者
- observer:true,//修改swiper自己或子元素时,自动初始化swiper
- bserveParents:true,//修改swiper的父元素时,自动初始化swiper
但是有时候,浏览器的宽度并没有发生变化,甚至swiper-container的宽度也没有变化,即宽度为:100%;这种情况使用swiper的各种方法都无法让图片自适应,比如:
- resizeObserver: true, //窗口容器变化
- on: {
- resize: function(){
- this.update(); //窗口变化时,更新Swiper的一些属性,如宽高等
- },
- }
mySwiper.update() :更新Swiper
mySwiper.onResize():当你的浏览器尺寸发生变化Swiper会使用这个方法更新Swiper的尺寸和progress等
bserveParents:true 这个也无法监听container父元素的宽度变化
mySwiper.updateContainerSize() 这个方法会重新计算Swiper的尺寸。
.....
以上办法统统不行,
最后只能通过jq的方式获取当前swiper的宽度,复制给swiper
这样完美解决问题
- if(!isShowSibeBar){ //显示侧边导航
- var swiperWidth = window.innerWidth - 65;
- }else{ //隐藏侧边导航
- var swiperWidth = window.innerWidth - 225;
- }
- $(".ban").css({'width':swiperWidth+'px'}) //把宽度赋值给swiper
文章点评